Update mobile device layout

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>

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 {

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;

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>

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

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;