Expand/Collapse SidebarItem at runtime?

[sharpchen]

I'd like to auto expand the sidebarItem corresponds to the opened page when loading. Sidebar items are all collapsed by default.

    import { useSidebar } from 'vitepress/theme';
    import { onMounted } from 'vue';
    const { sidebarGroups } = useSidebar();
    onMounted(() => {
        // sidebarGroups.value[0].collapsed = false;
    });

[babakfp]

Rec.0041.mp4

Is this what you mean? This is by default. I have collapsed: true, for "Migrations".

Or do mean you want to expand an item when the user navigates to a specific page? So when the user is on page B, the sidebar item of page A to be open.

[sharpchen]

Yes exactly, even better if I could expand it when navigate. Any solution for this?

[babakfp]

I don't know to be honest. Maybe you can listen to URL changes and whenever you are in the correct path, you can add some classes/styles to the nav.

https://gomakethings.com/how-to-detect-when-the-browser-url-changes-with-vanilla-js/