wip

src/client/theme-default/components/VPDocOutlineDropdown.vue

@@ -24,13 +24,13 @@ onContentUpdated(() => {
 
 <template>
   <div class="VPDocOutlineDropdown" v-if="headers.length > 0">
-    <button @click="open = !open" :class="{ open }">
+    <!-- <button @click="open = !open" :class="{ open }">
       {{ resolveTitle(theme) }}
       <VPIconChevronRight class="icon" />
     </button>
     <div class="items" v-if="open">
       <VPDocOutlineItem :headers="headers" />
-    </div>
+    </div> -->
   </div>
 </template>
 

src/client/theme-default/components/VPLocalNav.vue

@@ -42,8 +42,7 @@ const empty = computed(() => {
 const classes = computed(() => {
   return {
     VPLocalNav: true,
-    fixed: empty.value,
+    fixed: empty.value
-    'reached-top': y.value >= navHeight.value
   }
 })
 </script>
@@ -80,7 +79,6 @@ const classes = computed(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid var(--vp-c-gutter);
   border-bottom: 1px solid var(--vp-c-gutter);
   padding-top: var(--vp-layout-top-height, 0px);
   width: 100%;
@@ -91,11 +89,14 @@ const classes = computed(() => {
   position: fixed;
 }
 
-.VPLocalNav.reached-top {
+@media (min-width: 960px) {
-  border-top-color: transparent;
+  .VPLocalNav {
+    top: var(--vp-nav-height);
+    z-index: 1;
+  }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1280px) {
   .VPLocalNav {
     display: none;
   }

src/client/theme-default/components/VPNavBar.vue

@@ -36,6 +36,7 @@ watchPostEffect(() => {
 
 <template>
   <div class="VPNavBar" :class="classes">
+    <div class="wrapper">
       <div class="container">
         <div class="title">
           <VPNavBarTitle>
@@ -45,7 +46,6 @@ watchPostEffect(() => {
         </div>
 
         <div class="content">
-        <div class="curtain" />
           <div class="content-body">
             <slot name="nav-bar-content-before" />
             <VPNavBarSearch class="search" />
@@ -60,33 +60,38 @@ watchPostEffect(() => {
         </div>
       </div>
     </div>
+    <div class="divider" />
+  </div>
 </template>
 
 <style scoped>
 .VPNavBar {
   position: relative;
-  border-bottom: 1px solid transparent;
-  padding: 0 8px 0 24px;
   height: var(--vp-nav-height);
   pointer-events: none;
   white-space: nowrap;
 }
 
+@media (min-width: 960px) {
+  .VPNavBar:not(.has-sidebar):not(.top) {
+    background-color: var(--vp-nav-bg-color);
+  }
+}
+
+.wrapper {
+  padding: 0 8px 0 24px;
+}
+
 @media (min-width: 768px) {
-  .VPNavBar {
+  .wrapper {
     padding: 0 32px;
   }
 }
 
 @media (min-width: 960px) {
-  .VPNavBar.has-sidebar {
+  .VPNavBar.has-sidebar .wrapper {
     padding: 0;
   }
-
-  .VPNavBar:not(.has-sidebar):not(.top) {
-    border-bottom-color: var(--vp-c-gutter);
-    background-color: var(--vp-nav-bg-color);
-  }
 }
 
 .container {
@@ -206,27 +211,18 @@ watchPostEffect(() => {
   margin-right: -8px;
 }
 
-@media (min-width: 960px) {
+.divider {
-  .VPNavBar.has-sidebar .curtain {
-    position: absolute;
-    right: 0;
-    bottom: -31px;
-    width: calc(100% - var(--vp-sidebar-width));
-    height: 32px;
-  }
-
-  .VPNavBar.has-sidebar .curtain::before {
-    display: block;
   width: 100%;
-    height: 32px;
+  height: 1px;
-    background: linear-gradient(var(--vp-c-bg), transparent 70%);
-    content: "";
-  }
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 960px) {
-  .VPNavBar.has-sidebar .curtain {
+  .divider {
-    width: calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)));
+    background-color: var(--vp-c-gutter);
+  }
+  
+  .VPNavBar:not(.has-sidebar):not(.top) .divider {
+    /* background-color: var(--vp-c-gutter); */
   }
 }
 </style>