From d410d4dd9f1140b68d140642c1bceaf5419ff304 Mon Sep 17 00:00:00 2001
From: Marshall Thompson <marshall@creativeideal.net>
Date: Mon, 7 Nov 2022 06:10:51 -0700
Subject: [PATCH] feat(theme): sidebar nav slots (#1582)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 docs/guide/theme-introduction.md                  | 2 ++
 src/client/theme-default/Layout.vue               | 6 +++++-
 src/client/theme-default/components/VPSidebar.vue | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
index c59585b0..f2ef1774 100644
--- 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
index d21997bf..ffaf6b9c 100644
--- 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
index c7d1d382..2dec1c7d 100644
--- 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>