Implement exact active state matching for sidebar menu items
Publish telemt-api gateway Docker image / test (push) Successful in 29s
Publish telemt-api gateway Docker image / build-and-push (push) Successful in 2m20s

- 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:
Denozordec
2026-03-31 01:39:55 +07:00
parent 06141dbad0
commit 82dd7dd1bf
+6 -1
View File
@@ -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 />