chore: refactor logic in nav and sidebar composables

src/client/app/inert.ts

@@ -12,8 +12,7 @@ const inertStateSymbol = Symbol()
 export interface Inert {
   isSidebarOpen: boolean
   isScreenOpen: boolean
-  isSidebarEnabled: boolean
-  onAfterRouteChanged: () => void
+  isSidebarVisible: boolean
 }
 
 export interface InertState {
@@ -37,20 +36,13 @@ export function provideInert(app: App) {
   const inert = reactive({
     isSidebarOpen: false,
     isScreenOpen: false,
-    isSidebarEnabled: false,
-    onAfterRouteChanged() {
-      inert.isSidebarOpen = false
-      inert.isScreenOpen = false
-    }
+    isSidebarVisible: true
   })
   const inertState = reactive({
     inertSkipLink: computed(() => inert.isSidebarOpen || inert.isScreenOpen),
     inertNav: computed(() => inert.isSidebarOpen),
     inertLocalNav: computed(() => inert.isSidebarOpen || inert.isScreenOpen),
-    inertSidebar: computed(
-      () =>
-        !inert.isSidebarEnabled && (!inert.isSidebarOpen || inert.isScreenOpen)
-    ),
+    inertSidebar: computed(() => !inert.isSidebarVisible || inert.isScreenOpen),
     inertContent: computed(() => inert.isSidebarOpen || inert.isScreenOpen),
     inertFooter: computed(() => inert.isSidebarOpen || inert.isScreenOpen)
   })

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

@@ -1,42 +1,44 @@
-import { computed, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useInert, useRoute } from 'vitepress'
+import { useMediaQuery } from '@vueuse/core'
 
 export function useNav() {
   const inert = useInert()!
-  const isScreenOpen = computed(() => inert.isScreenOpen)
+  const is768 = useMediaQuery('(min-width: 768px)')
+  const isScreenOpen = ref(false)
 
   function openScreen() {
-    inert.isScreenOpen = true
-    window.addEventListener('resize', closeScreenOnTabletWindow)
-  }
-
-  function handleCloseScreen(fromRoute = false) {
-    if (fromRoute) inert.onAfterRouteChanged()
-    else inert.isScreenOpen = false
-    window.removeEventListener('resize', closeScreenOnTabletWindow)
+    isScreenOpen.value = true
   }
 
   function closeScreen() {
-    handleCloseScreen()
+    isScreenOpen.value = false
   }
 
   function toggleScreen() {
-    isScreenOpen.value ? handleCloseScreen() : openScreen()
+    isScreenOpen.value ? closeScreen() : openScreen()
   }
 
-  /**
-   * Close the screen when the user resizes the window wider than tablet size.
-   */
-  function closeScreenOnTabletWindow() {
-    window.outerWidth >= 768 && handleCloseScreen()
-  }
+  watch(is768, (mq) => {
+    if (mq) {
+      isScreenOpen.value = false
+    }
+  })
 
-  const route = useRoute()
   watch(
-    () => route.path,
-    () => handleCloseScreen(true)
+    () => [isScreenOpen.value, is768.value],
+    ([screenOpen, mq]) => {
+      if (mq) {
+        inert.isScreenOpen = false
+      } else {
+        inert.isScreenOpen = screenOpen
+      }
+    }
   )
 
+  const route = useRoute()
+  watch(() => route.path, closeScreen)
+
   return {
     isScreenOpen,
     openScreen,

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

@@ -32,10 +32,10 @@ export interface SidebarControl {
 
 export function useSidebar() {
   const { frontmatter, page, theme } = useData()
+  const inert = useInert()!
   const is960 = useMediaQuery('(min-width: 960px)')
 
-  const inert = useInert()!
-  const isOpen = computed(() => inert.isSidebarOpen)
+  const isOpen = ref(false)
 
   const _sidebar = computed(() => {
     const sidebarConfig = theme.value.sidebar
@@ -74,16 +74,28 @@ export function useSidebar() {
 
   const isSidebarEnabled = computed(() => hasSidebar.value && is960.value)
 
+  watch(
+    () => [hasSidebar.value, is960.value, isOpen.value],
+    ([sb, mq, o]) => {
+      if (o) {
+        inert.isSidebarVisible = inert.isSidebarOpen = true
+      } else {
+        inert.isSidebarOpen = false
+        inert.isSidebarVisible = sb && mq
+      }
+    }
+  )
+
   const sidebarGroups = computed(() => {
     return hasSidebar.value ? getSidebarGroups(sidebar.value) : []
   })
 
   function open() {
-    inert.isSidebarOpen = true
+    isOpen.value = true
   }
 
   function close() {
-    inert.isSidebarOpen = false
+    isOpen.value = false
   }
 
   function toggle() {