feat: export useSidebar

docs/reference/runtime-api.md

@@ -91,6 +91,25 @@ interface Router {
 }
 ```
 
+## `useSidebar` <Badge type="info" text="composable" />
+
+Returns sidebar-related data. The returned object has the following type:
+
+```ts
+interface Sidebar {
+  isOpen: Ref<boolean>
+  sidebar: Ref<DefaultTheme.SidebarItem[]>
+  sidebarGroups: Ref<DefaultTheme.SidebarItem[]>
+  hasSidebar: Ref<boolean>
+  hasAside: Ref<boolean>
+  leftAside: Ref<boolean>
+  isSidebarEnabled: Ref<boolean>
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+```
+
 ## `withBase` <Badge type="info" text="helper" />
 
 - **Type**: `(path: string) => string`

src/client/index.ts

@@ -4,6 +4,7 @@
 // generic types
 export type { VitePressData } from './app/data'
 export type { Route, Router } from './app/router'
+export type { Sidebar } from './theme-default/composables/sidebar'
 
 // theme types
 export type { EnhanceAppContext, Theme } from './app/theme'
@@ -13,7 +14,8 @@ export type { HeadConfig, Header, PageData, SiteData } from '../../types/shared'
 
 // composables
 export { useData } from './app/data'
-export { useRoute, useRouter } from './app/router'
+export { useRoute, useRouter, createRouter } from './app/router'
+export { useSidebar } from './theme-default/composables/sidebar'
 
 // utilities
 export {

src/client/theme-default/Layout.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, provide, useSlots, watch } from 'vue'
-import { useRoute } from 'vitepress'
+import { useRoute, useSidebar } from 'vitepress'
 import { useData } from './composables/data'
-import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar'
+import { useCloseSidebarOnEscape } from './composables/sidebar'
 import VPSkipLink from './components/VPSkipLink.vue'
 import VPBackdrop from './components/VPBackdrop.vue'
 import VPNav from './components/VPNav.vue'
@@ -56,7 +56,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     <VPContent>
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
-      
+
       <template #not-found><slot name="not-found" /></template>
       <template #home-hero-before><slot name="home-hero-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>

src/client/theme-default/components/VPContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useSidebar } from 'vitepress'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
 import VPPage from './VPPage.vue'
 import VPHome from './VPHome.vue'
 import VPDoc from './VPDoc.vue'

src/client/theme-default/components/VPDoc.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
+import { useRoute, useSidebar } from 'vitepress'
 import { computed } from 'vue'
-import { useSidebar } from '../composables/sidebar'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 import VPDocOutlineDropdown from './VPDocOutlineDropdown.vue'

src/client/theme-default/components/VPFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useSidebar } from 'vitepress'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
 
 const { theme } = useData()
 const { hasSidebar } = useSidebar()

src/client/theme-default/components/VPLocalNav.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
-import { onContentUpdated } from 'vitepress'
+import { onContentUpdated, useSidebar } from 'vitepress'
 import { useData } from '../composables/data'
 import { getHeaders, type MenuItem } from '../composables/outline'
-import { useSidebar } from '../composables/sidebar'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
 import VPIconAlignLeft from './icons/VPIconAlignLeft.vue'
 

src/client/theme-default/components/VPNavBar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useWindowScroll } from '@vueuse/core'
-import { useSidebar } from '../composables/sidebar'
+import { useSidebar } from 'vitepress'
 import VPNavBarTitle from './VPNavBarTitle.vue'
 import VPNavBarSearch from './VPNavBarSearch.vue'
 import VPNavBarMenu from './VPNavBarMenu.vue'

src/client/theme-default/components/VPNavBarTitle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useSidebar } from 'vitepress'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
 import { useLangs } from '../composables/langs'
 import { normalizeLink } from '../support/utils'
 import VPImage from './VPImage.vue'

src/client/theme-default/components/VPSidebar.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, watchPostEffect } from 'vue'
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
-import { useSidebar } from '../composables/sidebar'
+import { useSidebar } from 'vitepress'
 import VPSidebarItem from './VPSidebarItem.vue'
 
 const { sidebarGroups, hasSidebar } = useSidebar()

src/client/theme-default/composables/aside.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 import { useMediaQuery } from '@vueuse/core'
-import { useSidebar } from './sidebar'
+import { useSidebar } from 'vitepress'
 
 export function useAside() {
   const { hasSidebar } = useSidebar()

src/client/theme-default/composables/sidebar.ts

@@ -18,6 +18,19 @@ import {
 } from '../support/sidebar'
 import { useData } from './data'
 
+export interface Sidebar {
+  isOpen: Ref<boolean>
+  sidebar: Ref<DefaultTheme.SidebarItem[]>
+  sidebarGroups: Ref<DefaultTheme.SidebarItem[]>
+  hasSidebar: Ref<boolean>
+  hasAside: Ref<boolean>
+  leftAside: Ref<boolean>
+  isSidebarEnabled: Ref<boolean>
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
 export interface SidebarControl {
   collapsed: Ref<boolean>
   collapsible: ComputedRef<boolean>
@@ -28,7 +41,7 @@ export interface SidebarControl {
   toggle(): void
 }
 
-export function useSidebar() {
+export function useSidebar(): Sidebar {
   const route = useRoute()
   const { theme, frontmatter } = useData()
   const is960 = useMediaQuery('(min-width: 960px)')