From 7eccb654b30f7326444910ad201aa9d63dc7f2c9 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Mon, 4 Apr 2022 01:30:47 +0800
Subject: [PATCH] Update mobile device layout

---
 .../components/icons/toggle-button.vue        | 23 +++++++++----------
 .../components/subnav/toggle-sidebar-btn.vue  |  7 +++---
 .../vitepress/components/vp-sponsor-large.vue |  1 -
 .../vitepress/components/vp-sponsor-small.vue |  4 ++++
 .../vitepress/components/vp-subnav.vue        |  4 +++-
 docs/.vitepress/vitepress/styles/subnav.scss  |  5 ----
 6 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/docs/.vitepress/vitepress/components/icons/toggle-button.vue b/docs/.vitepress/vitepress/components/icons/toggle-button.vue
index c37662d4f9..03c3446913 100644
--- a/docs/.vitepress/vitepress/components/icons/toggle-button.vue
+++ b/docs/.vitepress/vitepress/components/icons/toggle-button.vue
@@ -1,15 +1,14 @@
 <template>
-  <svg viewBox="0 0 24 24">
-    <g fill="none">
-      <path
-        d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z"
-        fill="currentColor"
-      />
-      <path
-        d="M4 18a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z"
-        fill="currentColor"
-      />
-      <path d="M11 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8z" fill="currentColor" />
-    </g>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="2" y="7" width="11" height="2" fill="#606266" />
+    <rect x="2" y="11" width="14" height="2" fill="#606266" />
+    <rect x="2" y="15" width="8" height="2" fill="#606266" />
+    <rect x="2" y="3" width="16" height="2" fill="#606266" />
   </svg>
 </template>
diff --git a/docs/.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue b/docs/.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue
index 9b33118a1d..2c875ef2d9 100644
--- a/docs/.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue
+++ b/docs/.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue
@@ -3,10 +3,11 @@ import ToggleButton from '../icons/toggle-button.vue'
 </script>
 
 <template>
-  <div class="sidebar-button">
-    <ElIcon :size="24">
+  <div class="sidebar-button flex items-center">
+    <ElIcon :size="20" class="mr-2">
       <ToggleButton />
     </ElIcon>
+    <span class="leading-6">Menu</span>
   </div>
 </template>
 
@@ -14,8 +15,6 @@ import ToggleButton from '../icons/toggle-button.vue'
 .sidebar-button {
   cursor: pointer;
   color: var(--text-color);
-  display: flex;
-  align-items: center;
 }
 
 .sidebar-button .icon {
diff --git a/docs/.vitepress/vitepress/components/vp-sponsor-large.vue b/docs/.vitepress/vitepress/components/vp-sponsor-large.vue
index fc5a00329e..e8a537f911 100644
--- a/docs/.vitepress/vitepress/components/vp-sponsor-large.vue
+++ b/docs/.vitepress/vitepress/components/vp-sponsor-large.vue
@@ -40,7 +40,6 @@ import { platinumSponsors } from '../../config/sponsors'
 
 @media (max-width: 768px) {
   .sponsor-item {
-    max-width: 160px;
     img {
       border-radius: 4px;
       min-height: 45px;
diff --git a/docs/.vitepress/vitepress/components/vp-sponsor-small.vue b/docs/.vitepress/vitepress/components/vp-sponsor-small.vue
index 165cb4e160..91cf053e1a 100644
--- a/docs/.vitepress/vitepress/components/vp-sponsor-small.vue
+++ b/docs/.vitepress/vitepress/components/vp-sponsor-small.vue
@@ -41,5 +41,9 @@ import { goldSponsors } from '../../config/sponsors'
       width: 100%;
     }
   }
+
+  @include respond-to('xs') {
+    width: 196px;
+  }
 }
 </style>
diff --git a/docs/.vitepress/vitepress/components/vp-subnav.vue b/docs/.vitepress/vitepress/components/vp-subnav.vue
index 7c9063aff9..2aed0e0c71 100644
--- a/docs/.vitepress/vitepress/components/vp-subnav.vue
+++ b/docs/.vitepress/vitepress/components/vp-subnav.vue
@@ -9,11 +9,13 @@ const { shouldShow, scrollToTop } = useBackTop()
 </script>
 
 <template>
-  <div class="sub-nav">
+  <div class="sub-nav py-3 px-6 flex items-center">
     <ToggleSidebarBtn v-if="hasSidebar" @click="$emit('open-menu')" />
     <Transition name="shifting">
       <ElButton
         type="text"
+        class="height-5"
+        size="small"
         :class="{ 'go-back-top': true, show: shouldShow }"
         @click.prevent.stop="scrollToTop"
         >{{ 'Back to top' }}</ElButton
diff --git a/docs/.vitepress/vitepress/styles/subnav.scss b/docs/.vitepress/vitepress/styles/subnav.scss
index e83bbc44ff..90bdc757ff 100644
--- a/docs/.vitepress/vitepress/styles/subnav.scss
+++ b/docs/.vitepress/vitepress/styles/subnav.scss
@@ -12,11 +12,6 @@
   z-index: var(--sub-nav-z-index);
   overflow: hidden;
 
-  .sidebar-button,
-  .go-back-top {
-    padding: 0 16px;
-  }
-
   .go-back-top {
     transform: translateY(100%);
     opacity: 0;