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

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>

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`

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>

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>