@@ -5,12 +5,13 @@ import {
5
5
onMounted ,
6
6
onUnmounted ,
7
7
ref ,
8
- watchEffect
8
+ watchEffect ,
9
+ watch
9
10
} from 'vue'
10
11
import { useMediaQuery } from '@vueuse/core'
11
12
import { useRoute } from 'vitepress'
12
13
import type { DefaultTheme } from 'vitepress/theme'
13
- import { isActive } from '../../shared'
14
+ import { inBrowser , isActive } from '../../shared'
14
15
import {
15
16
hasActiveLink as containsActiveLink ,
16
17
getSidebar ,
@@ -22,7 +23,7 @@ export interface SidebarControl {
22
23
collapsed : Ref < boolean >
23
24
collapsible : ComputedRef < boolean >
24
25
isLink : ComputedRef < boolean >
25
- isActiveLink : ComputedRef < boolean >
26
+ isActiveLink : Ref < boolean >
26
27
hasActiveLink : ComputedRef < boolean >
27
28
hasChildren : ComputedRef < boolean >
28
29
toggle ( ) : void
@@ -127,6 +128,13 @@ export function useCloseSidebarOnEscape(
127
128
}
128
129
}
129
130
131
+ const hashRef = ref ( inBrowser ? location . hash : '' )
132
+ if ( inBrowser ) {
133
+ window . addEventListener ( 'hashchange' , ( ) => {
134
+ hashRef . value = location . hash
135
+ } )
136
+ }
137
+
130
138
export function useSidebarControl (
131
139
item : ComputedRef < DefaultTheme . SidebarItem >
132
140
) : SidebarControl {
@@ -142,9 +150,13 @@ export function useSidebarControl(
142
150
return ! ! item . value . link
143
151
} )
144
152
145
- const isActiveLink = computed ( ( ) => {
146
- return isActive ( page . value . relativePath , item . value . link )
147
- } )
153
+ const isActiveLink = ref ( false )
154
+ const updateIsActiveLink = ( ) => {
155
+ isActiveLink . value = isActive ( page . value . relativePath , item . value . link )
156
+ }
157
+
158
+ watch ( [ page , item , hashRef ] , updateIsActiveLink )
159
+ onMounted ( updateIsActiveLink )
148
160
149
161
const hasActiveLink = computed ( ( ) => {
150
162
if ( isActiveLink . value ) {
0 commit comments