fix: get router route in store

package.json

@@ -105,7 +105,7 @@
     "tsx": "^4.16.2",
     "typescript": "^5.5.3",
     "unbuild": "^2.0.0",
-    "vitest": "^1.6.0",
+    "vitest": "^2.0.0",
     "vue-tsc": "2.0.17",
     "zx": "^8.1.4"
   },

packages/valaxy-theme-yun/components/YunSidebar.vue

@@ -6,24 +6,25 @@ defineProps<{
   showHamburger?: boolean
 }>()
 
-const yunApp = useYunAppStore()
+const yunStore = useYunAppStore()
 const showOverview = ref(false)
 </script>
 
 <template>
-  <ValaxyOverlay class="md:hidden" :show="yunApp.leftSidebar.isOpen" @click="yunApp.leftSidebar.toggle()" />
+  <ValaxyOverlay class="md:hidden" :show="yunStore.leftSidebar.isOpen" @click="yunStore.leftSidebar.toggle()" />
 
   <ValaxyHamburger
-    :active="yunApp.leftSidebar.isOpen"
+    :active="yunStore.leftSidebar.isOpen"
     class="menu-btn sidebar-toggle yun-icon-btn leading-4 fixed left-0.8rem top-0.6rem"
     inline-flex cursor="pointer" z="$yun-z-menu-btn"
-    :class="showHamburger ? '' : 'md:hidden'" @click="yunApp.leftSidebar.toggle()"
+    :class="showHamburger ? '' : 'md:hidden'"
+    @click="yunStore.leftSidebar.toggle()"
   />
 
   <aside
     class="va-card transition sidebar fixed inset-y-0 left-0 overflow-y-auto"
     :class="{
-      'open': yunApp.leftSidebar.isOpen,
+      'open': yunStore.leftSidebar.isOpen,
       'md:translate-x-0': !showHamburger,
     }"
     text="center" bg="$yun-sidebar-bg-color contain no-repeat" z="$yun-z-sidebar"
@@ -54,8 +55,6 @@ const showOverview = ref(false)
 </template>
 
 <style lang="scss">
-@use "sass:map";
-
 .sidebar {
   width: calc(100vw - 64px);
   max-width: var(--va-sidebar-width);

packages/valaxy-theme-yun/layouts/home.vue

@@ -2,14 +2,14 @@
 import { useLayout } from 'valaxy'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useThemeConfig } from '../composables'
 import { useYunAppStore } from '../stores'
+import { useThemeConfig } from '../composables'
 
-const yunApp = useYunAppStore()
+const yunStore = useYunAppStore()
+const route = useRoute()
 const isHome = useLayout('home')
 const themeConfig = useThemeConfig()
 
-const route = useRoute()
 const isPage = computed(() => route.path.startsWith('/page'))
 
 const showNotice = computed(() => {
@@ -21,7 +21,7 @@ const showNotice = computed(() => {
 <template>
   <main
     class="yun-main flex-center"
-    :class="(isHome && !yunApp.leftSidebar.isOpen) ? 'pl-0' : 'md:pl-$va-sidebar-width'" flex="~ col" w="full"
+    :class="(isHome && !yunStore.leftSidebar.isOpen) ? 'pl-0' : 'md:pl-$va-sidebar-width'" flex="~ col" w="full"
   >
     <YunSidebar :show-hamburger="true" />
 

packages/valaxy-theme-yun/setup/main.ts

@@ -6,9 +6,13 @@ export default defineAppSetup((ctx) => {
   // can do for setup
 
   const { router } = ctx
-  const appStore = useAppStore()
-  const yunAppStore = useYunAppStore()
   router.afterEach(() => {
+    /**
+     * router import order
+     * @see https://pinia.vuejs.org/zh/core-concepts/outside-component-usage.html#single-page-applications
+     */
+    const appStore = useAppStore()
+    const yunAppStore = useYunAppStore()
     nextTick(() => {
       if (appStore.isMobile)
         yunAppStore.leftSidebar.close()

packages/valaxy-theme-yun/stores/app.ts

@@ -2,7 +2,6 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 import { useDynamicLeftSidebar } from 'valaxy'
 
 export const useYunAppStore = defineStore('yun-app', () => {
-  // global cache for yun
   const leftSidebar = useDynamicLeftSidebar()
 
   return {

packages/valaxy/client/composables/layout.ts

@@ -1,10 +1,18 @@
+import { useMediaQuery } from '@vueuse/core'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 export function useLayout(layout?: string) {
-  const route = useRoute() || {}
+  const route = useRoute()
   if (layout)
     return computed(() => route.meta?.layout === layout)
   else
     return computed(() => route.meta?.layout)
 }
+
+/**
+ * is mobile media query
+ */
+export function useMobile() {
+  return useMediaQuery('(max-width: 768px)')
+}

packages/valaxy/client/composables/sidebar.ts

@@ -1,7 +1,6 @@
 import { computed, ref, watchEffect } from 'vue'
-import { useAppStore } from 'valaxy'
 import { useFrontmatter } from './common'
-import { useLayout } from './layout'
+import { useLayout, useMobile } from './layout'
 
 /**
  * helper for sidebar
@@ -46,12 +45,12 @@ export function useSidebar() {
  * - sidebar can be toggled by user
  */
 export function useDynamicLeftSidebar() {
-  const appStore = useAppStore()
-  const isOpen = ref(false)
   const layout = useLayout()
+  const isMobile = useMobile()
+  const isOpen = ref(isMobile.value ? false : layout.value !== 'home')
 
   watchEffect(() => {
-    if (appStore.isMobile)
+    if (isMobile.value)
       close()
     else if (layout.value !== 'home')
       open()

packages/valaxy/client/stores/app.ts

@@ -1,7 +1,7 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { useMediaQuery, useToggle } from '@vueuse/core'
+import { useToggle } from '@vueuse/core'
 import { ref } from 'vue'
-import { useThemeConfig, useValaxyDark } from 'valaxy'
+import { useMobile, useThemeConfig, useValaxyDark } from 'valaxy'
 
 /**
  * Global store for users
@@ -15,7 +15,7 @@ export const useAppStore = defineStore('app', () => {
   const themeConfig = useThemeConfig()
   const { isDark, toggleDark, toggleDarkWithTransition, themeColor } = useValaxyDark(themeConfig.value.valaxyDarkOptions)
 
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const isMobile = useMobile()
   const showLoading = ref(true)
 
   // right sidebar with toc

packages/valaxy/package.json

@@ -99,7 +99,7 @@
     "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.11",
-    "lru-cache": "^10.3.1",
+    "lru-cache": "^10.4.0",
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.0.1",
     "markdown-it-attrs": "^4.1.6",
@@ -120,7 +120,7 @@
     "qrcode": "^1.5.3",
     "sass": "^1.77.6",
     "shiki": "^1.10.3",
-    "star-markdown-css": "^0.5.0",
+    "star-markdown-css": "^0.5.1",
     "unocss": "^0.61.3",
     "unplugin-vue-components": "^0.27.2",
     "unplugin-vue-markdown": "^0.26.2",