docs: use BNav for "on this page" contents (bootstrap-vue-next#2480)

dwgray · Dec 29, 2024 · 193b77d · 193b77d
1 parent e6dc2d5
commit 193b77d
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 48 deletions.
diff --git a/apps/docs/.vitepress/theme/Layout.vue b/apps/docs/.vitepress/theme/Layout.vue
@@ -711,38 +711,6 @@ watch(
   }
 }
 
-.table-of-contents {
-  font-size: 0.875rem;
-
-  ul {
-    padding-left: 0;
-    margin-bottom: 0;
-    list-style: none;
-
-    a {
-      display: block;
-      padding: 0.125rem 0 0.125rem 0.75rem;
-      color: inherit;
-      text-decoration: none;
-      border-left: 0.125rem solid transparent;
-
-      &.active {
-        color: var(--bd-toc-color);
-        border-left-color: var(--bd-toc-color);
-      }
-
-      &:hover {
-        color: var(--bd-toc-color);
-        border-left-color: var(--bd-toc-color);
-      }
-    }
-
-    ul {
-      padding-left: 1rem;
-    }
-  }
-}
-
 // Search
 .DocSearch-Button .DocSearch-Search-Icon {
   @media (max-width: 767px) {

diff --git a/apps/docs/src/components/PageContents.vue b/apps/docs/src/components/PageContents.vue
@@ -1,14 +1,10 @@
 <template>
-  <nav v-if="headers.length > 0" class="table-of-contents">
-    <ul>
-      <li v-for="header in headers" :key="header.slug">
-        <PageContentsItem :item="header" />
-      </li>
-      <li v-if="isComponentPage">
-        <a href="#component-reference">Component Reference</a>
-      </li>
-    </ul>
-  </nav>
+  <BNav v-if="headers.length > 0" vertical small class="otp-nav">
+    <PageContentsItem v-for="header in headers" :key="header.slug" :item="header" />
+    <BNavItem v-if="isComponentPage" href="#component-reference" link-class="otp-link"
+      >Component Reference</BNavItem
+    >
+  </BNav>
 </template>
 
 <script setup lang="ts">
@@ -19,3 +15,29 @@ const data = useData()
 const headers = computed(() => data.page.value.headers)
 const isComponentPage = computed(() => data.page.value.relativePath.includes('/components/'))
 </script>
+
+<style lang="scss">
+.nav.otp-nav {
+  padding-left: 0.5rem;
+}
+
+a.nav-link.otp-link {
+  padding: 0;
+  padding-left: 0.25rem;
+  color: var(--bs-secondary-color);
+  font-size: 0.75rem;
+  border-left: 0.125rem solid transparent;
+
+  &.active {
+    color: var(--bs-primary-text-emphasis);
+    border-left-color: var(--bs-primary-text-emphasis);
+    font-weight: bold;
+  }
+
+  &:hover {
+    color: var(--bs-primary-text-emphasis);
+    border-left-color: var(--bs-primary-text-emphasis);
+    font-weight: bold;
+  }
+}
+</style>
diff --git a/apps/docs/src/components/PageContentsItem.vue b/apps/docs/src/components/PageContentsItem.vue
@@ -1,10 +1,12 @@
 <template>
-  <li>
-    <a :href="item.link">{{ item.title }}</a>
-    <ul v-if="item.children?.length > 0">
-      <PageContentsItem v-for="child in item.children" :key="child.slug" :item="child" />
-    </ul>
-  </li>
+  <BNavItem :href="item.link" link-class="otp-link">
+    <template #default>{{ item.title }}</template>
+    <template #after>
+      <BNav v-if="item.children?.length > 0" vertical small class="otp-nav">
+        <PageContentsItem v-for="child in item.children" :key="child.slug" :item="child" />
+      </BNav>
+    </template>
+  </BNavItem>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/docs/src/data/components/nav.data.ts b/apps/docs/src/data/components/nav.data.ts
@@ -162,6 +162,10 @@ export default {
         },
       ],
       slots: [
+        {
+          name: 'after',
+          description: 'Content to place after the nav item link (useful for nested navs)',
+        },
         {
           name: 'default',
           description: 'Content to place in the nav item',

diff --git a/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue b/packages/bootstrap-vue-next/src/components/BNav/BNavItem.vue
@@ -10,6 +10,7 @@
     >
       <slot />
     </BLink>
+    <slot name="after" />
   </li>
 </template>
 
@@ -23,6 +24,8 @@ import {useDefaults} from '../../composables/useDefaults'
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default?: (props: Record<string, never>) => any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  after?: (props: Record<string, never>) => any
 }>()
 
 const _props = withDefaults(defineProps<BNavItemProps>(), {