fix: nav active state — plain path link not highlighted when sibling query-param link matches
This commit is contained in:
@@ -192,16 +192,40 @@
|
||||
}
|
||||
|
||||
function isActive(href: string): boolean {
|
||||
if (href.includes('?')) {
|
||||
const [path, qs] = href.split('?');
|
||||
if (page.url.pathname !== path) return false;
|
||||
const params = new URLSearchParams(qs);
|
||||
const [hrefPath, hrefQs] = href.split('?');
|
||||
if (page.url.pathname !== hrefPath) return false;
|
||||
|
||||
if (hrefQs) {
|
||||
// Link has query params — all must match
|
||||
const params = new URLSearchParams(hrefQs);
|
||||
for (const [k, v] of params) {
|
||||
if (page.url.searchParams.get(k) !== v) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return page.url.pathname === href;
|
||||
|
||||
// Link has NO query params — only active if URL also has no
|
||||
// query params that a sibling link would claim
|
||||
// (e.g. /telegram-bots is not active when URL is /telegram-bots?tab=matrix)
|
||||
if (page.url.searchParams.size > 0) {
|
||||
// Check if any sibling nav item matches with those params
|
||||
for (const entry of navEntries) {
|
||||
if (isGroup(entry)) {
|
||||
for (const child of entry.children) {
|
||||
if (child.href !== href && child.href.startsWith(hrefPath + '?')) {
|
||||
const sibQs = child.href.split('?')[1];
|
||||
const sibParams = new URLSearchParams(sibQs);
|
||||
let sibMatch = true;
|
||||
for (const [k, v] of sibParams) {
|
||||
if (page.url.searchParams.get(k) !== v) { sibMatch = false; break; }
|
||||
}
|
||||
if (sibMatch) return false; // a sibling with query params matches better
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user