From 82dd7dd1bfcb23031fcde500914b2cb0dada1303 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 31 Mar 2026 01:39:55 +0700
Subject: [PATCH] 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.
---
 web/src/lib/components/app-sidebar.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index 1267a62..8029567 100644
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -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 />