From 190904171500ad22998c8666080fd58c867a59b5 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 10 Mar 2024 14:21:41 +0530
Subject: [PATCH] fix(theme): local nav separator not visible on pages having
 no outline

---
 .../theme-default/components/VPNavBar.vue     | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index ce18f4a33200..19a5da61b7a3 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -2,7 +2,6 @@
 import { useWindowScroll } from '@vueuse/core'
 import { ref, watchPostEffect } from 'vue'
 import { useData } from '../composables/data'
-import { useLocalNav } from '../composables/local-nav'
 import { useSidebar } from '../composables/sidebar'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
@@ -23,7 +22,6 @@ defineEmits<{
 
 const { y } = useWindowScroll()
 const { hasSidebar } = useSidebar()
-const { hasLocalNav } = useLocalNav()
 const { frontmatter } = useData()
 
 const classes = ref<Record<string, boolean>>({})
@@ -31,8 +29,8 @@ const classes = ref<Record<string, boolean>>({})
 watchPostEffect(() => {
   classes.value = {
     'has-sidebar': hasSidebar.value,
-    'has-local-nav': hasLocalNav.value,
-    top: frontmatter.value.layout === 'home' && y.value === 0,
+    'home': frontmatter.value.layout === 'home',
+    'top': y.value === 0,
   }
 })
 </script>
@@ -79,16 +77,16 @@ watchPostEffect(() => {
   transition: background-color 0.5s;
 }
 
-.VPNavBar.has-local-nav {
+.VPNavBar:not(.home) {
   background-color: var(--vp-nav-bg-color);
 }
 
 @media (min-width: 960px) {
-  .VPNavBar.has-local-nav {
+  .VPNavBar:not(.home) {
     background-color: transparent;
   }
 
-  .VPNavBar:not(.has-sidebar):not(.top) {
+  .VPNavBar:not(.has-sidebar):not(.home.top) {
     background-color: var(--vp-nav-bg-color);
   }
 }
@@ -188,12 +186,12 @@ watchPostEffect(() => {
 }
 
 @media (min-width: 960px) {
-  .VPNavBar:not(.top) .content-body {
+  .VPNavBar:not(.home.top) .content-body {
     position: relative;
     background-color: var(--vp-nav-bg-color);
   }
 
-  .VPNavBar:not(.has-sidebar):not(.top) .content-body {
+  .VPNavBar:not(.has-sidebar):not(.home.top) .content-body {
     background-color: transparent;
   }
 }
@@ -253,16 +251,16 @@ watchPostEffect(() => {
   transition: background-color 0.5s;
 }
 
-.VPNavBar.has-local-nav .divider-line {
+.VPNavBar:not(.home) .divider-line {
   background-color: var(--vp-c-gutter);
 }
 
 @media (min-width: 960px) { 
-  .VPNavBar:not(.top) .divider-line {
+  .VPNavBar:not(.home.top) .divider-line {
     background-color: var(--vp-c-gutter);
   }
 
-  .VPNavBar:not(.has-sidebar):not(.top) .divider {
+  .VPNavBar:not(.has-sidebar):not(.home.top) .divider {
     background-color: var(--vp-c-gutter);
   }
 }