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,
-    'reached-top': y.value >= navHeight.value
+    fixed: empty.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 {
-  border-top-color: transparent;
+@media (min-width: 960px) {
+  .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,57 +36,62 @@ watchPostEffect(() => {
 
 <template>
   <div class="VPNavBar" :class="classes">
-    <div class="container">
-      <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>
-        </VPNavBarTitle>
-      </div>
+    <div class="wrapper">
+      <div class="container">
+        <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>
+          </VPNavBarTitle>
+        </div>
 
-      <div class="content">
-        <div class="curtain" />
-        <div class="content-body">
-          <slot name="nav-bar-content-before" />
-          <VPNavBarSearch class="search" />
-          <VPNavBarMenu class="menu" />
-          <VPNavBarTranslations class="translations" />
-          <VPNavBarAppearance class="appearance" />
-          <VPNavBarSocialLinks class="social-links" />
-          <VPNavBarExtra class="extra" />
-          <slot name="nav-bar-content-after" />
-          <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+        <div class="content">
+          <div class="content-body">
+            <slot name="nav-bar-content-before" />
+            <VPNavBarSearch class="search" />
+            <VPNavBarMenu class="menu" />
+            <VPNavBarTranslations class="translations" />
+            <VPNavBarAppearance class="appearance" />
+            <VPNavBarSocialLinks class="social-links" />
+            <VPNavBarExtra class="extra" />
+            <slot name="nav-bar-content-after" />
+            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+          </div>
         </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) {
-  .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;
-    background: linear-gradient(var(--vp-c-bg), transparent 70%);
-    content: "";
-  }
+.divider {
+  width: 100%;
+  height: 1px;
 }
 
-@media (min-width: 1440px) {
-  .VPNavBar.has-sidebar .curtain {
-    width: calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)));
+@media (min-width: 960px) {
+  .divider {
+    background-color: var(--vp-c-gutter);
+  }
+  
+  .VPNavBar:not(.has-sidebar):not(.top) .divider {
+    /* background-color: var(--vp-c-gutter); */
   }
 }
 </style>