From 0958b6aff4b4ccb3043afa0d0603ddc425c9e221 Mon Sep 17 00:00:00 2001
From: Yuxuan Zhang <github@z-yx.cc>
Date: Fri, 4 Apr 2025 23:54:35 -0400
Subject: [PATCH] refactor: migrate useSidebar into useLayout and
 useSidebarControl

---
 src/client/theme-default/Layout.vue           |   4 +-
 .../theme-default/components/VPContent.vue    |   4 +-
 src/client/theme-default/components/VPDoc.vue |   4 +-
 .../theme-default/components/VPFooter.vue     |   4 +-
 .../theme-default/components/VPLocalNav.vue   |   4 +-
 .../theme-default/components/VPNavBar.vue     |   4 +-
 .../components/VPNavBarTitle.vue              |   4 +-
 .../theme-default/components/VPSidebar.vue    |   4 +-
 .../components/VPSidebarItem.vue              |   4 +-
 src/client/theme-default/composables/aside.ts |   4 +-
 .../theme-default/composables/layout.ts       |  58 +++++++++-
 .../theme-default/composables/sidebar.ts      | 107 ++++--------------
 src/client/theme-default/without-fonts.ts     |   2 +-
 13 files changed, 99 insertions(+), 108 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 69284148..3a7a64ec 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -9,13 +9,13 @@ import VPNav from './components/VPNav.vue'
 import VPSidebar from './components/VPSidebar.vue'
 import VPSkipLink from './components/VPSkipLink.vue'
 import { useData } from './composables/data'
-import { useCloseSidebarOnEscape, useSidebar } from './composables/sidebar'
+import { useCloseSidebarOnEscape, useSidebarControl } from './composables/sidebar'
 
 const {
   isOpen: isSidebarOpen,
   open: openSidebar,
   close: closeSidebar
-} = useSidebar()
+} = useSidebarControl()
 
 const route = useRoute()
 watch(() => route.path, closeSidebar)
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 6ab7cb01..be982368 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -2,14 +2,12 @@
 import NotFound from '../NotFound.vue'
 import { useData } from '../composables/data'
 import { useLayout } from '../composables/layout'
-import { useSidebar } from '../composables/sidebar'
 import VPDoc from './VPDoc.vue'
 import VPHome from './VPHome.vue'
 import VPPage from './VPPage.vue'
 
 const { page, frontmatter } = useData()
-const { isHome } = useLayout()
-const { hasSidebar } = useSidebar()
+const { isHome, hasSidebar } = useLayout()
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index b3253ab4..4ac18bd9 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -2,14 +2,14 @@
 import { useRoute } from 'vitepress'
 import { computed } from 'vue'
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const { theme } = useData()
 
 const route = useRoute()
-const { hasSidebar, hasAside, leftAside } = useSidebar()
+const { hasSidebar, hasAside, leftAside } = useLayout()
 
 const pageName = computed(() =>
   route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
diff --git a/src/client/theme-default/components/VPFooter.vue b/src/client/theme-default/components/VPFooter.vue
index 3a21ff2b..63638044 100644
--- a/src/client/theme-default/components/VPFooter.vue
+++ b/src/client/theme-default/components/VPFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 
 const { theme, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
+const { hasSidebar } = useLayout()
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 15791dd5..3381ef23 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -5,7 +5,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useData } from '../composables/data'
 import { useLocalNav } from '../composables/local-nav'
 import { getHeaders } from '../composables/outline'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import VPLocalNavOutlineDropdown from './VPLocalNavOutlineDropdown.vue'
 
 defineProps<{
@@ -17,7 +17,7 @@ defineEmits<{
 }>()
 
 const { theme, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
+const { hasSidebar } = useLayout()
 const { headers } = useLocalNav()
 const { y } = useWindowScroll()
 
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 1ba8de7d..1313657c 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -2,7 +2,6 @@
 import { useWindowScroll } from '@vueuse/core'
 import { ref, watchPostEffect } from 'vue'
 import { useLayout } from '../composables/layout'
-import { useSidebar } from '../composables/sidebar'
 import VPNavBarAppearance from './VPNavBarAppearance.vue'
 import VPNavBarExtra from './VPNavBarExtra.vue'
 import VPNavBarHamburger from './VPNavBarHamburger.vue'
@@ -21,8 +20,7 @@ defineEmits<{
 }>()
 
 const { y } = useWindowScroll()
-const { hasSidebar } = useSidebar()
-const { isHome } = useLayout()
+const { isHome, hasSidebar } = useLayout()
 
 const classes = ref<Record<string, boolean>>({})
 
diff --git a/src/client/theme-default/components/VPNavBarTitle.vue b/src/client/theme-default/components/VPNavBarTitle.vue
index 1e1ef3d7..a5a38e96 100644
--- a/src/client/theme-default/components/VPNavBarTitle.vue
+++ b/src/client/theme-default/components/VPNavBarTitle.vue
@@ -2,12 +2,12 @@
 import { computed } from 'vue'
 import { useData } from '../composables/data'
 import { useLangs } from '../composables/langs'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import { normalizeLink } from '../support/utils'
 import VPImage from './VPImage.vue'
 
 const { site, theme } = useData()
-const { hasSidebar } = useSidebar()
+const { hasSidebar } = useLayout()
 const { currentLang } = useLangs()
 
 const link = computed(() =>
diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
index 35fa7838..99827a4c 100644
--- a/src/client/theme-default/components/VPSidebar.vue
+++ b/src/client/theme-default/components/VPSidebar.vue
@@ -2,10 +2,10 @@
 import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from 'vitepress'
 import { ref, watch } from 'vue'
-import { useSidebar } from '../composables/sidebar'
+import { useLayout } from '../composables/layout'
 import VPSidebarGroup from './VPSidebarGroup.vue'
 
-const { sidebarGroups, hasSidebar } = useSidebar()
+const { sidebarGroups, hasSidebar } = useLayout()
 
 const props = defineProps<{
   open: boolean
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 022584e3..d71d1062 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DefaultTheme } from 'vitepress/theme'
 import { computed } from 'vue'
-import { useSidebarControl } from '../composables/sidebar'
+import { useSidebarItemControl } from '../composables/sidebar'
 import VPLink from './VPLink.vue'
 
 const props = defineProps<{
@@ -17,7 +17,7 @@ const {
   hasActiveLink,
   hasChildren,
   toggle
-} = useSidebarControl(computed(() => props.item))
+} = useSidebarItemControl(computed(() => props.item))
 
 const sectionTag = computed(() => (hasChildren.value ? 'section' : `div`))
 
diff --git a/src/client/theme-default/composables/aside.ts b/src/client/theme-default/composables/aside.ts
index ccec52d3..50f20626 100644
--- a/src/client/theme-default/composables/aside.ts
+++ b/src/client/theme-default/composables/aside.ts
@@ -1,9 +1,9 @@
 import { useMediaQuery } from '@vueuse/core'
 import { computed } from 'vue'
-import { useSidebar } from './sidebar'
+import { useLayout } from './layout'
 
 export function useAside() {
-  const { hasSidebar } = useSidebar()
+  const { hasSidebar } = useLayout()
   const is960 = useMediaQuery('(min-width: 960px)')
   const is1280 = useMediaQuery('(min-width: 1280px)')
 
diff --git a/src/client/theme-default/composables/layout.ts b/src/client/theme-default/composables/layout.ts
index 9fc39673..523f517f 100644
--- a/src/client/theme-default/composables/layout.ts
+++ b/src/client/theme-default/composables/layout.ts
@@ -1,8 +1,11 @@
-import { computed } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { getSidebar, getSidebarGroups } from '../support/sidebar'
 import { useData } from './data'
 
 export function useLayout() {
-  const { frontmatter } = useData()
+  const { frontmatter, page, theme } = useData()
+  const is960 = useMediaQuery('(min-width: 960px)')
 
   const isHome = computed(() => {
     if (frontmatter.value.isHome !== undefined)
@@ -10,5 +13,54 @@ export function useLayout() {
     else return frontmatter.value.layout === 'home'
   })
 
-  return { isHome }
+  const _sidebar = computed(() => {
+    const sidebarConfig = theme.value.sidebar
+    const relativePath = page.value.relativePath
+    return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : []
+  })
+
+  const sidebar = ref(_sidebar.value)
+
+  watch(_sidebar, (next, prev) => {
+    if (JSON.stringify(next) !== JSON.stringify(prev))
+      sidebar.value = _sidebar.value
+  })
+
+  const hasSidebar = computed(() => {
+    return (
+      frontmatter.value.sidebar !== false &&
+      sidebar.value.length > 0 &&
+      !isHome.value
+    )
+  })
+
+  const leftAside = computed(() => {
+    if (hasAside)
+      return frontmatter.value.aside == null
+        ? theme.value.aside === 'left'
+        : frontmatter.value.aside === 'left'
+    return false
+  })
+
+  const hasAside = computed(() => {
+    if (isHome.value) return false
+    if (frontmatter.value.aside != null) return !!frontmatter.value.aside
+    return theme.value.aside !== false
+  })
+
+  const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
+
+  const sidebarGroups = computed(() => {
+    return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
+  })
+
+  return {
+    isHome,
+    sidebar,
+    sidebarGroups,
+    hasSidebar,
+    hasAside,
+    leftAside,
+    isSidebarEnabled
+  }
 }
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index 2907919a..79d1073a 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -1,4 +1,3 @@
-import { useMediaQuery } from '@vueuse/core'
 import type { DefaultTheme } from 'vitepress/theme'
 import {
   computed,
@@ -12,13 +11,8 @@ import {
   type Ref
 } from 'vue'
 import { isActive } from '../../shared'
-import {
-  hasActiveLink as containsActiveLink,
-  getSidebar,
-  getSidebarGroups
-} from '../support/sidebar'
+import { hasActiveLink as containsActiveLink } from '../support/sidebar'
 import { useData } from './data'
-import { useLayout } from './layout'
 
 export interface SidebarControl {
   collapsed: Ref<boolean>
@@ -30,80 +24,6 @@ export interface SidebarControl {
   toggle(): void
 }
 
-export function useSidebar() {
-  const { frontmatter, page, theme } = useData()
-  const { isHome } = useLayout()
-  const is960 = useMediaQuery('(min-width: 960px)')
-
-  const isOpen = ref(false)
-
-  const _sidebar = computed(() => {
-    const sidebarConfig = theme.value.sidebar
-    const relativePath = page.value.relativePath
-    return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : []
-  })
-
-  const sidebar = ref(_sidebar.value)
-
-  watch(_sidebar, (next, prev) => {
-    if (JSON.stringify(next) !== JSON.stringify(prev))
-      sidebar.value = _sidebar.value
-  })
-
-  const hasSidebar = computed(() => {
-    return (
-      frontmatter.value.sidebar !== false &&
-      sidebar.value.length > 0 &&
-      !isHome.value
-    )
-  })
-
-  const leftAside = computed(() => {
-    if (hasAside)
-      return frontmatter.value.aside == null
-        ? theme.value.aside === 'left'
-        : frontmatter.value.aside === 'left'
-    return false
-  })
-
-  const hasAside = computed(() => {
-    if (isHome.value) return false
-    if (frontmatter.value.aside != null) return !!frontmatter.value.aside
-    return theme.value.aside !== false
-  })
-
-  const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
-
-  const sidebarGroups = computed(() => {
-    return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
-  })
-
-  function open() {
-    isOpen.value = true
-  }
-
-  function close() {
-    isOpen.value = false
-  }
-
-  function toggle() {
-    isOpen.value ? close() : open()
-  }
-
-  return {
-    isOpen,
-    sidebar,
-    sidebarGroups,
-    hasSidebar,
-    hasAside,
-    leftAside,
-    isSidebarEnabled,
-    open,
-    close,
-    toggle
-  }
-}
-
 /**
  * a11y: cache the element that opened the Sidebar (the menu button) then
  * focus that button again when Menu is closed with Escape key.
@@ -136,7 +56,30 @@ export function useCloseSidebarOnEscape(
   }
 }
 
-export function useSidebarControl(
+export function useSidebarControl() {
+  const isOpen = ref(false)
+
+  function open() {
+    isOpen.value = true
+  }
+
+  function close() {
+    isOpen.value = false
+  }
+
+  function toggle() {
+    isOpen.value ? close() : open()
+  }
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle
+  }
+}
+
+export function useSidebarItemControl(
   item: ComputedRef<DefaultTheme.SidebarItem>
 ): SidebarControl {
   const { page, hash } = useData()
diff --git a/src/client/theme-default/without-fonts.ts b/src/client/theme-default/without-fonts.ts
index 6287785d..676e80e3 100644
--- a/src/client/theme-default/without-fonts.ts
+++ b/src/client/theme-default/without-fonts.ts
@@ -32,7 +32,7 @@ export { default as VPTeamPageSection } from './components/VPTeamPageSection.vue
 export { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue'
 
 export { useLocalNav } from './composables/local-nav'
-export { useSidebar } from './composables/sidebar'
+export { useLayout } from './composables/layout'
 
 const theme: Theme = {
   Layout,