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] 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 d693be5b..8f90dc68 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 8b033785..79a665b0 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 3f6063fe..8b105b31 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 9679f8a5..de07968f 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 323a07d2..817a9c9b 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;