From 6a33280175dd201056c34cf35abcc860d62dcbdb Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Thu, 8 May 2025 23:01:55 +0800
Subject: [PATCH 1/3] feat(default-theme): collapsible sidbar

Signed-off-by: Artea <sepush@outlook.com>
---
 src/client/theme-default/Layout.vue           | 68 ++++++++++++++-
 .../theme-default/components/VPNavBar.vue     | 86 ++++++++++++++++++-
 .../theme-default/components/VPSidebar.vue    | 33 ++++++-
 .../theme-default/composables/sidebar.ts      |  9 +-
 src/client/theme-default/styles/icons.css     |  3 +
 5 files changed, 188 insertions(+), 11 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 30ebe4912b91..33900358a6cf 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -8,15 +8,18 @@ import VPNav from './components/VPNav.vue'
 import VPSidebar from './components/VPSidebar.vue'
 import VPSkipLink from './components/VPSkipLink.vue'
 import { useData } from './composables/data'
-import { registerWatchers } from './composables/layout'
+import { registerWatchers, useLayout } from './composables/layout'
 import { useSidebarControl } from './composables/sidebar'
 
 const {
   isOpen: isSidebarOpen,
   open: openSidebar,
-  close: closeSidebar
+  close: closeSidebar,
+  isCollapsed
 } = useSidebarControl()
 
+const { hasSidebar } = useLayout()
+
 registerWatchers({ closeSidebar })
 
 const { frontmatter } = useData()
@@ -25,13 +28,21 @@ const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
 
 provide('hero-image-slot-exists', heroImageSlotExists)
+
+const layoutClasses = computed(() => {
+  return {
+    [String(frontmatter.value.pageClass || '')]: !!frontmatter.value.pageClass,
+    'has-sidebar': hasSidebar.value,
+    'sidebar-collapsed': isCollapsed.value && hasSidebar.value
+  }
+})
 </script>
 
 <template>
   <div
     v-if="frontmatter.layout !== false"
     class="Layout"
-    :class="frontmatter.pageClass"
+    :class="layoutClasses"
   >
     <slot name="layout-top" />
     <VPSkipLink />
@@ -92,4 +103,55 @@ provide('hero-image-slot-exists', heroImageSlotExists)
   flex-direction: column;
   min-height: 100vh;
 }
+
+@media (min-width: 960px) {
+  .Layout.has-sidebar.sidebar-collapsed {
+    --vp-sidebar-width: 0px; 
+  }
+
+  .Layout.has-sidebar.sidebar-collapsed .VPContent {
+    padding-left: 24px; 
+  }
+  
+  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content-container),
+  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content) { 
+    max-width: 752px ; 
+  }
+
+  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .container) {
+    max-width: 992px; 
+  }
+
+  .VPContent,
+  .VPContent :deep(.VPDoc .container),
+  .VPContent :deep(.VPDoc .content-container),
+  .VPContent :deep(.VPDoc .content),
+  .VPLocalNav,
+  .VPNavBar.has-sidebar .title,
+  .VPNavBar.has-sidebar .content,
+  .VPNavBar.has-sidebar .divider {
+    transition: padding-left 0.25s ease, margin-left 0.25s ease, width 0.25s ease, max-width 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
+  }
+
+  
+  .Layout.has-sidebar.sidebar-collapsed .VPLocalNav.has-sidebar {
+    padding-left: 24px; 
+  }
+
+  .Layout.has-sidebar.sidebar-collapsed .VPNavBar.has-sidebar .content {
+    padding-left: var(--vp-nav-padding-x, 32px); 
+  }
+}
+
+@media (min-width: 1440px) {
+  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content-container),
+  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content) { 
+    max-width: 100%;
+  }
+
+  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .container) {
+    max-width: 100%;
+    justify-content: space-between;
+  }
+}
 </style>
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 1313657ccebe..f98e5a55333a 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { ref, watchPostEffect } from 'vue'
+import { ref, computed, watchPostEffect } from 'vue'
 import { useLayout } from '../composables/layout'
+import { useSidebarControl } from '../composables/sidebar'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
 import VPNavBarHamburger from './VPNavBarHamburger.vue'
@@ -20,34 +21,56 @@ defineEmits<{
 }>()
 
 const { y } = useWindowScroll()
+const { isCollapsed, toggleCollapse: toggleSidebarCollapse } = useSidebarControl()
 const { isHome, hasSidebar } = useLayout()
 
 const classes = ref<Record<string, boolean>>({})
 
+const isSidebarExpanded = computed(() => {
+  return hasSidebar.value && !isCollapsed.value;
+});
+
 watchPostEffect(() => {
   classes.value = {
     'has-sidebar': hasSidebar.value,
     'home': isHome.value,
     'top': y.value === 0,
-    'screen-open': props.isScreenOpen
+    'screen-open': props.isScreenOpen,
+    'sidebar-effectively-collapsed': isSidebarExpanded.value,
   }
 })
+
 </script>
 
 <template>
   <div class="VPNavBar" :class="classes">
     <div class="wrapper">
       <div class="container">
-        <div class="title">
-          <VPNavBarTitle>
+        <div class="title" v-if="isSidebarExpanded">
+          <VPNavBarTitle >
             <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
             <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
           </VPNavBarTitle>
+          <button
+            class="sidebar-toggle-button title-area-toggle"
+            @click="toggleSidebarCollapse"
+            aria-label="collapse sidebar"
+          >
+            <span class="vpi-collapse icon" />
+          </button>
         </div>
 
         <div class="content">
           <div class="content-body">
             <slot name="nav-bar-content-before" />
+            <button
+              v-if="!isSidebarExpanded&&!isHome"
+              class="sidebar-toggle-button"
+              @click="toggleSidebarCollapse"
+              aria-label="expand sidebar"
+            >
+              <span class="vpi-collapse icon is-collapsed" />
+            </button>
             <VPNavBarSearch class="search" />
             <VPNavBarMenu class="menu" />
             <VPNavBarTranslations class="translations" />
@@ -140,6 +163,9 @@ watchPostEffect(() => {
   flex-shrink: 0;
   height: calc(var(--vp-nav-height) - 1px);
   transition: background-color 0.5s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 @media (min-width: 960px) {
@@ -269,4 +295,56 @@ watchPostEffect(() => {
     background-color: var(--vp-c-gutter);
   }
 }
+
+.sidebar-toggle-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px; 
+  height: 36px;
+  color: var(--vp-c-text-2);
+  background-color: transparent;
+  border: none;
+  border-radius: 6px;
+  transition: background-color 0.25s, color 0.25s;
+  pointer-events: auto; 
+}
+
+.sidebar-toggle-button:hover {
+  background-color: var(--vp-c-bg-mute);
+  color: var(--vp-c-text-1);
+}
+
+.sidebar-toggle-button .icon {
+  width: 20px; 
+  height: 20px;
+  transition: transform 0.25s ease;
+}
+
+.sidebar-toggle-button .icon.is-collapsed {
+  transform: rotate(180deg);
+}
+
+.title-area-toggle {
+  display: none;
+}
+
+@media (min-width: 960px) {
+  .VPNavBar.has-sidebar .title-area-toggle {
+     display: flex; 
+  }
+
+  .VPNavBar.has-sidebar.sidebar-effectively-collapsed .search-area-toggle {
+    display: flex; 
+  }
+}
+
+.title :deep(.VPNavBarTitle) {
+  flex-shrink: 0;
+}
+
+.content-body {
+  display: flex;
+  align-items:center; 
+}
 </style>
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index c2de0a0d8356..7f1fa204cc26 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -4,8 +4,10 @@ import { inBrowser } from 'vitepress'
 import { ref, watch } from 'vue'
 import { useLayout } from '../composables/layout'
 import VPSidebarGroup from './VPSidebarGroup.vue'
+import { useSidebarControl } from '../composables/sidebar'
 
 const { sidebarGroups, hasSidebar } = useLayout()
+const { isCollapsed } = useSidebarControl()
 
 const props = defineProps<{
   open: boolean
@@ -41,7 +43,7 @@ watch(
   <aside
     v-if="hasSidebar"
     class="VPSidebar"
-    :class="{ open }"
+    :class="{ open, collapsed: isCollapsed }"
     ref="navEl"
     @click.stop
   >
@@ -88,8 +90,11 @@ watch(
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
-  transition: opacity 0.25s,
-    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.VPSidebar.collapsed .nav,
+.VPSidebar.collapsed .curtain {
+  display: none;
 }
 
 .dark .VPSidebar {
@@ -106,6 +111,22 @@ watch(
     visibility: visible;
     box-shadow: none;
     transform: translateX(0);
+    transition: transform 0.25s ease, width 0.25s ease, padding-left 0.25s ease, padding-right 0.25s ease;
+  }
+
+  .VPSidebar.collapsed {
+    transform: translateX(0);
+    padding-left: 0;
+    padding-right: 0;
+    border-left: none;
+    border-right: none;
+    overflow: hidden;
+    display: none;
+  }
+
+  .VPSidebar.collapsed .nav,
+  .VPSidebar.collapsed .curtain {
+    display: none;
   }
 }
 
@@ -114,6 +135,12 @@ watch(
     padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
     width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
+
+  .VPSidebar.collapsed {
+    transform: translateX(0);
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 @media (min-width: 960px) {
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index b693cc89d266..ddfe63372710 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -14,6 +14,7 @@ import { hasActiveLink as containsActiveLink } from '../support/sidebar'
 import { useData } from './data'
 
 const isOpen = ref(false)
+const isCollapsed = ref(false)
 
 /**
  * a11y: cache the element that opened the Sidebar (the menu button) then
@@ -57,11 +58,17 @@ export function useSidebarControl() {
     isOpen.value ? close() : open()
   }
 
+  function toggleCollapse() {
+    isCollapsed.value = !isCollapsed.value
+  }
+
   return {
     isOpen,
     open,
     close,
-    toggle
+    toggle,
+    isCollapsed,
+    toggleCollapse
   }
 }
 
diff --git a/src/client/theme-default/styles/icons.css b/src/client/theme-default/styles/icons.css
index 987651a3e50e..70242edcd708 100644
--- a/src/client/theme-default/styles/icons.css
+++ b/src/client/theme-default/styles/icons.css
@@ -85,6 +85,9 @@
 .vpi-corner-down-left {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E");
 }
+.vpi-collapse {
+  --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUiPgogICAgICAgIDxyZWN0IHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgeD0iMyIgeT0iMyIgcng9IjIiLz4KICAgICAgICA8cGF0aCBkPSJNOSAzdjE4Ii8+CiAgICA8L3N2Zz4=');
+}
 :root {
   /* clipboard */
   --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");

From f3f067312db803d989b134fc0d081b9bc7dbd896 Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Fri, 9 May 2025 01:45:47 +0800
Subject: [PATCH 2/3] refactor: clean useless style

---
 src/client/theme-default/Layout.vue           | 37 +-----------------
 .../theme-default/components/VPNavBar.vue     | 31 ++-------------
 .../theme-default/components/VPSidebar.vue    | 38 ++++---------------
 3 files changed, 12 insertions(+), 94 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 33900358a6cf..d693be5b647e 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -104,46 +104,11 @@ const layoutClasses = computed(() => {
   min-height: 100vh;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1440px) {
   .Layout.has-sidebar.sidebar-collapsed {
     --vp-sidebar-width: 0px; 
   }
 
-  .Layout.has-sidebar.sidebar-collapsed .VPContent {
-    padding-left: 24px; 
-  }
-  
-  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content-container),
-  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content) { 
-    max-width: 752px ; 
-  }
-
-  .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .container) {
-    max-width: 992px; 
-  }
-
-  .VPContent,
-  .VPContent :deep(.VPDoc .container),
-  .VPContent :deep(.VPDoc .content-container),
-  .VPContent :deep(.VPDoc .content),
-  .VPLocalNav,
-  .VPNavBar.has-sidebar .title,
-  .VPNavBar.has-sidebar .content,
-  .VPNavBar.has-sidebar .divider {
-    transition: padding-left 0.25s ease, margin-left 0.25s ease, width 0.25s ease, max-width 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
-  }
-
-  
-  .Layout.has-sidebar.sidebar-collapsed .VPLocalNav.has-sidebar {
-    padding-left: 24px; 
-  }
-
-  .Layout.has-sidebar.sidebar-collapsed .VPNavBar.has-sidebar .content {
-    padding-left: var(--vp-nav-padding-x, 32px); 
-  }
-}
-
-@media (min-width: 1440px) {
   .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content-container),
   .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content) { 
     max-width: 100%;
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index f98e5a55333a..3f6063fe92fe 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -35,8 +35,7 @@ watchPostEffect(() => {
     'has-sidebar': hasSidebar.value,
     'home': isHome.value,
     'top': y.value === 0,
-    'screen-open': props.isScreenOpen,
-    'sidebar-effectively-collapsed': isSidebarExpanded.value,
+    'screen-open': props.isScreenOpen
   }
 })
 
@@ -46,13 +45,14 @@ watchPostEffect(() => {
   <div class="VPNavBar" :class="classes">
     <div class="wrapper">
       <div class="container">
-        <div class="title" v-if="isSidebarExpanded">
+        <div class="title"  v-if="isSidebarExpanded||isHome">
           <VPNavBarTitle >
             <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
             <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
           </VPNavBarTitle>
           <button
-            class="sidebar-toggle-button title-area-toggle"
+            v-if="isSidebarExpanded"
+            class="sidebar-toggle-button"
             @click="toggleSidebarCollapse"
             aria-label="collapse sidebar"
           >
@@ -324,27 +324,4 @@ watchPostEffect(() => {
 .sidebar-toggle-button .icon.is-collapsed {
   transform: rotate(180deg);
 }
-
-.title-area-toggle {
-  display: none;
-}
-
-@media (min-width: 960px) {
-  .VPNavBar.has-sidebar .title-area-toggle {
-     display: flex; 
-  }
-
-  .VPNavBar.has-sidebar.sidebar-effectively-collapsed .search-area-toggle {
-    display: flex; 
-  }
-}
-
-.title :deep(.VPNavBarTitle) {
-  flex-shrink: 0;
-}
-
-.content-body {
-  display: flex;
-  align-items:center; 
-}
 </style>
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 7f1fa204cc26..323a07d2c047 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useLayout } from '../composables/layout'
 import VPSidebarGroup from './VPSidebarGroup.vue'
 import { useSidebarControl } from '../composables/sidebar'
@@ -30,6 +30,9 @@ watch(
 
 const key = ref(0)
 
+const showSideBar = computed(()=>hasSidebar.value&&!isCollapsed.value)
+
+
 watch(
   sidebarGroups,
   () => {
@@ -40,10 +43,10 @@ watch(
 </script>
 
 <template>
-  <aside
-    v-if="hasSidebar"
+    <aside
+    v-if="showSideBar"
     class="VPSidebar"
-    :class="{ open, collapsed: isCollapsed }"
+    :class="{ open }"
     ref="navEl"
     @click.stop
   >
@@ -92,11 +95,6 @@ watch(
   transform: translateX(0);
 }
 
-.VPSidebar.collapsed .nav,
-.VPSidebar.collapsed .curtain {
-  display: none;
-}
-
 .dark .VPSidebar {
   box-shadow: var(--vp-shadow-1);
 }
@@ -111,22 +109,6 @@ watch(
     visibility: visible;
     box-shadow: none;
     transform: translateX(0);
-    transition: transform 0.25s ease, width 0.25s ease, padding-left 0.25s ease, padding-right 0.25s ease;
-  }
-
-  .VPSidebar.collapsed {
-    transform: translateX(0);
-    padding-left: 0;
-    padding-right: 0;
-    border-left: none;
-    border-right: none;
-    overflow: hidden;
-    display: none;
-  }
-
-  .VPSidebar.collapsed .nav,
-  .VPSidebar.collapsed .curtain {
-    display: none;
   }
 }
 
@@ -135,12 +117,6 @@ watch(
     padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
     width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
-
-  .VPSidebar.collapsed {
-    transform: translateX(0);
-    padding-left: 0;
-    padding-right: 0;
-  }
 }
 
 @media (min-width: 960px) {

From 69f3520577a8442bf2b72960bfd4c2c6807e297c Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Fri, 9 May 2025 16:04:50 +0800
Subject: [PATCH 3/3] fix: only show collapsed btn in pc

---
 src/client/theme-default/Layout.vue           |  4 --
 .../theme-default/components/VPContent.vue    | 10 +++-
 .../theme-default/components/VPNavBar.vue     | 57 ++++++++++---------
 .../components/VPNavBarTitle.vue              |  5 --
 .../theme-default/components/VPSidebar.vue    | 38 ++++++++++---
 5 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index d693be5b647e..8f90dc68aa94 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -105,10 +105,6 @@ const layoutClasses = computed(() => {
 }
 
 @media (min-width: 1440px) {
-  .Layout.has-sidebar.sidebar-collapsed {
-    --vp-sidebar-width: 0px; 
-  }
-
   .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content-container),
   .Layout.has-sidebar.sidebar-collapsed .VPContent :deep(.VPDoc .content) { 
     max-width: 100%;
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 8b033785d60c..79a665b04c23 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
-import { useLayout } from '../composables/layout'
+import { useLayout, } from '../composables/layout'
+import {useSidebarControl} from '../composables/sidebar'
 import VPDoc from './VPDoc.vue'
 import VPHome from './VPHome.vue'
 import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
 const { isHome, hasSidebar } = useLayout()
+const {isCollapsed} = useSidebarControl()
 </script>
 
 <template>
   <div
     class="VPContent"
     id="VPContent"
-    :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome }"
+    :class="{ 'has-sidebar': hasSidebar, 'is-home': isHome ,'collapsed':isCollapsed
+    }"
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 
@@ -91,5 +94,8 @@ const { isHome, hasSidebar } = useLayout()
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
     padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
+  .VPContent.has-sidebar.collapsed {
+    padding-left: calc(100vw - var(--vp-layout-max-width)) / 2 ;
+  }
 }
 </style>
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 3f6063fe92fe..8b105b312449 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { ref, computed, watchPostEffect } from 'vue'
+import { useMediaQuery, useWindowScroll } from '@vueuse/core'
+import { ref, watchPostEffect } from 'vue'
 import { useLayout } from '../composables/layout'
 import { useSidebarControl } from '../composables/sidebar'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
@@ -21,56 +21,46 @@ defineEmits<{
 }>()
 
 const { y } = useWindowScroll()
-const { isCollapsed, toggleCollapse: toggleSidebarCollapse } = useSidebarControl()
+const {isCollapsed, toggleCollapse: toggleSidebarCollapse } = useSidebarControl()
 const { isHome, hasSidebar } = useLayout()
 
 const classes = ref<Record<string, boolean>>({})
 
-const isSidebarExpanded = computed(() => {
-  return hasSidebar.value && !isCollapsed.value;
-});
-
 watchPostEffect(() => {
   classes.value = {
     'has-sidebar': hasSidebar.value,
     'home': isHome.value,
     'top': y.value === 0,
+    'collapsed':isCollapsed.value,
     'screen-open': props.isScreenOpen
   }
 })
-
+const is1440 = useMediaQuery('(min-width: 1440px)')
 </script>
 
 <template>
   <div class="VPNavBar" :class="classes">
     <div class="wrapper">
       <div class="container">
-        <div class="title"  v-if="isSidebarExpanded||isHome">
-          <VPNavBarTitle >
-            <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
-            <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
-          </VPNavBarTitle>
-          <button
-            v-if="isSidebarExpanded"
-            class="sidebar-toggle-button"
-            @click="toggleSidebarCollapse"
-            aria-label="collapse sidebar"
-          >
-            <span class="vpi-collapse icon" />
-          </button>
-        </div>
+          <div class="title">
+            <VPNavBarTitle >
+              <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
+              <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
 
-        <div class="content">
-          <div class="content-body">
-            <slot name="nav-bar-content-before" />
+            </VPNavBarTitle>
             <button
-              v-if="!isSidebarExpanded&&!isHome"
+              v-if="!isHome&&is1440"
               class="sidebar-toggle-button"
               @click="toggleSidebarCollapse"
-              aria-label="expand sidebar"
+              aria-label="collapse sidebar"
             >
-              <span class="vpi-collapse icon is-collapsed" />
+              <span class="vpi-collapse icon" />
             </button>
+        </div>
+
+        <div class="content">
+          <div class="content-body">
+            <slot name="nav-bar-content-before" />
             <VPNavBarSearch class="search" />
             <VPNavBarMenu class="menu" />
             <VPNavBarTranslations class="translations" />
@@ -117,6 +107,9 @@ watchPostEffect(() => {
   .VPNavBar:not(.has-sidebar):not(.home.top) {
     background-color: var(--vp-nav-bg-color);
   }
+  .VPNavBar.collapsed {
+    background-color: var(--vp-nav-bg-color);
+  }
 }
 
 .wrapper {
@@ -167,6 +160,14 @@ watchPostEffect(() => {
   align-items: center;
   justify-content: space-between;
 }
+.VPNavBar:not(.home):not(.collapsed).has-sidebar .title{
+    border-bottom: 1px solid var(--vp-c-divider);
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px - 20px)
+}
+.VPNavBar:not(.home).collapsed .title{
+    background-color: var(--vp-nav-bg-color);
+    border-bottom: 1px solid var(--vp-c-divider);
+}
 
 @media (min-width: 960px) {
   .VPNavBar.has-sidebar .title {
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index 9679f8a5c592..de07968fb267 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -50,7 +50,6 @@ const target = computed(() =>
 .title {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
   font-size: 16px;
@@ -63,10 +62,6 @@ const target = computed(() =>
   .title {
     flex-shrink: 0;
   }
-
-  .VPNavBarTitle.has-sidebar .title {
-    border-bottom-color: var(--vp-c-divider);
-  }
 }
 
 :deep(.logo) {
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 323a07d2c047..817a9c9b9248 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { useScrollLock } from '@vueuse/core'
+import { useEventListener, useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useLayout } from '../composables/layout'
 import VPSidebarGroup from './VPSidebarGroup.vue'
 import { useSidebarControl } from '../composables/sidebar'
 
-const { sidebarGroups, hasSidebar } = useLayout()
+const { isHome,sidebarGroups } = useLayout()
 const { isCollapsed } = useSidebarControl()
 
 const props = defineProps<{
@@ -30,8 +30,6 @@ watch(
 
 const key = ref(0)
 
-const showSideBar = computed(()=>hasSidebar.value&&!isCollapsed.value)
-
 
 watch(
   sidebarGroups,
@@ -40,15 +38,25 @@ watch(
   },
   { deep: true }
 )
+
+useEventListener(document,'mousemove',(e)=>{
+  if(isHome.value) return
+  if(e.clientX<5){
+    navEl.value?.classList.add('expanded')
+  }else if(e.target instanceof Node &&!navEl.value?.contains(e.target)&&e.pageX>272){
+    navEl.value?.classList.remove('expanded')
+  }
+})
+
 </script>
 
 <template>
     <aside
-    v-if="showSideBar"
     class="VPSidebar"
-    :class="{ open }"
+    :class="{ open ,collapsed:isCollapsed}"
     ref="navEl"
     @click.stop
+    v-if="!isHome"
   >
     <div class="curtain" />
 
@@ -89,6 +97,22 @@ watch(
   overscroll-behavior: contain;
 }
 
+.collapsed{
+  transform: translateX(-100%);
+  opacity: 0 !important;
+  transition: opacity 0.25s, transform 0.25s ease;
+  overscroll-behavior: contain;
+}
+.expanded{
+  transform: translateX(0);
+  opacity: 1 !important;
+  transition: opacity 0.25s, transform 0.25s ease;
+  overscroll-behavior: contain;
+  width: calc(100vw - 64px);
+  max-width: 320px;
+  z-index: var(--vp-z-index-sidebar) !important;
+}
+
 .VPSidebar.open {
   opacity: 1;
   visibility: visible;