Implement exact active state matching for sidebar menu items
- Added a new function `activeExact` to ensure only exact matches highlight the sidebar menu items, improving navigation clarity for root nodes. - Updated the `Sidebar.MenuButton` to utilize the new exact matching function for the Dashboard link, enhancing user experience by preventing incorrect highlighting of nested pages.
This commit is contained in:
@@ -27,6 +27,11 @@
|
|||||||
if (href === '/') return p === '/';
|
if (href === '/') return p === '/';
|
||||||
return p === href || p.startsWith(href + '/');
|
return p === href || p.startsWith(href + '/');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Только точное совпадение (для корня ноды `/servers/{alias}` — иначе вложенные страницы вроде …/mihomo подсвечивали бы и Dashboard). */
|
||||||
|
function activeExact(href: string): boolean {
|
||||||
|
return page.url.pathname === href;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Sidebar.Root collapsible="icon">
|
<Sidebar.Root collapsible="icon">
|
||||||
@@ -128,7 +133,7 @@
|
|||||||
<Sidebar.GroupLabel>Нода</Sidebar.GroupLabel>
|
<Sidebar.GroupLabel>Нода</Sidebar.GroupLabel>
|
||||||
<Sidebar.Menu>
|
<Sidebar.Menu>
|
||||||
<Sidebar.MenuItem>
|
<Sidebar.MenuItem>
|
||||||
<Sidebar.MenuButton isActive={active(serverPath)} tooltipContent="Dashboard">
|
<Sidebar.MenuButton isActive={activeExact(serverPath)} tooltipContent="Dashboard">
|
||||||
{#snippet child({ props })}
|
{#snippet child({ props })}
|
||||||
<a href={serverPath} {...props}>
|
<a href={serverPath} {...props}>
|
||||||
<LayoutDashboardIcon />
|
<LayoutDashboardIcon />
|
||||||
|
|||||||
Reference in New Issue
Block a user