refactor: clean useless style

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%;

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>

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) {