feat(theme): sidebar nav slots (#1582)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
vuejs · Nov 7, 2022 · d410d4d · d410d4d
1 parent 7955760
commit d410d4d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
@@ -201,6 +201,8 @@ Full list of slots available in the default theme layout:
   - `doc-footer-before`
   - `doc-before`
   - `doc-after`
+  - `sidebar-nav-before`
+  - `sidebar-nav-after`
   - `aside-top`
   - `aside-bottom`
   - `aside-outline-before`

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -40,7 +40,11 @@ const { frontmatter } = useData()
       <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
     </VPNav>
     <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
-    <VPSidebar :open="isSidebarOpen" />
+
+    <VPSidebar :open="isSidebarOpen">
+      <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
+      <template #sidebar-nav-after><slot name="sidebar-nav-after" /></template>
+    </VPSidebar>
 
     <VPContent>
       <template #home-hero-before><slot name="home-hero-before" /></template>

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
@@ -44,6 +44,8 @@ watchPostEffect(async () => {
         Sidebar Navigation
       </span>
 
+      <slot name="sidebar-nav-before" />
+
       <div v-for="group in sidebar" :key="group.text" class="group">
         <VPSidebarGroup
           :text="group.text"
@@ -52,6 +54,8 @@ watchPostEffect(async () => {
           :collapsed="group.collapsed"
         />
       </div>
+
+      <slot name="sidebar-nav-after" />
     </nav>
   </aside>
 </template>