feat: migrate updateMarker to the child component

theme/components/SakuraSidebar.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 import { useSakuraAppStore } from '../stores'
 import { useThemeConfig } from '../composables'
 
@@ -9,26 +8,9 @@ const props = withDefaults(defineProps<{
 }>(), {})
 
 const sakuraAppStore = useSakuraAppStore()
-const route = useRoute()
 const themeConfig = useThemeConfig()
 
-const marker = ref()
 const position = ref(props.position ?? themeConfig.value.sidebarOptions.position)
-
-watch(() => route.path, () => nextTick(() => updateMarker()))
-
-function updateMarker() {
-  const routeActive = document.querySelector('.sakura-sidebar .site-link .router-link-active') as HTMLElement
-  // const sidebarTop = document.querySelector('.sakura-sidebar .site-link') as HTMLElement
-
-  marker.value.style.top = `${routeActive?.offsetTop || 0}px`
-  marker.value.style.height = `${routeActive?.offsetHeight || 0}px`
-}
-
-onMounted(() => {
-  nextTick(() => updateMarker())
-  marker.value = document.querySelector('.sakura-sidebar #marker')
-})
 </script>
 
 <template>

theme/components/themes/SidebarThemeOverview.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 import { useCategories, useSiteStore, useTags } from 'valaxy'
 import type { NavItem } from '../../types'
 import { useThemeConfig } from '../../composables'
@@ -10,14 +11,30 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-
 const site = useSiteStore()
-
 const categories = useCategories()
 const tags = useTags()
 const themeConfig = useThemeConfig()
+const route = useRoute()
+
+const marker = ref()
 
 const sidebar = computed(() => props.sidebar || themeConfig.value.sidebar) as unknown as NavItem[]
+
+watch(() => route.path, () => nextTick(() => updateMarker()))
+
+function updateMarker() {
+  const routeActive = document.querySelector('.sakura-sidebar .site-link .router-link-active') as HTMLElement
+  // const sidebarTop = document.querySelector('.sakura-sidebar .site-link') as HTMLElement
+
+  marker.value.style.top = `${routeActive?.offsetTop || 0}px`
+  marker.value.style.height = `${routeActive?.offsetHeight || 0}px`
+}
+
+onMounted(() => {
+  nextTick(() => updateMarker())
+  marker.value = document.querySelector('.sakura-sidebar #marker')
+})
 </script>
 
 <template>