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 === '/';
|
||||
return p === href || p.startsWith(href + '/');
|
||||
}
|
||||
|
||||
/** Только точное совпадение (для корня ноды `/servers/{alias}` — иначе вложенные страницы вроде …/mihomo подсвечивали бы и Dashboard). */
|
||||
function activeExact(href: string): boolean {
|
||||
return page.url.pathname === href;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Sidebar.Root collapsible="icon">
|
||||
@@ -128,7 +133,7 @@
|
||||
<Sidebar.GroupLabel>Нода</Sidebar.GroupLabel>
|
||||
<Sidebar.Menu>
|
||||
<Sidebar.MenuItem>
|
||||
<Sidebar.MenuButton isActive={active(serverPath)} tooltipContent="Dashboard">
|
||||
<Sidebar.MenuButton isActive={activeExact(serverPath)} tooltipContent="Dashboard">
|
||||
{#snippet child({ props })}
|
||||
<a href={serverPath} {...props}>
|
||||
<LayoutDashboardIcon />
|
||||
|
||||
Reference in New Issue
Block a user