RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: navbar highlight zoooooomin 

probably only became an issue now because of updated packages
This commit is contained in:
Maya 2025-09-02 17:59:14 +03:00
parent 61c22b6add
commit 850c4ae6ce
No known key found for this signature in database
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/layout/Navbar/Base.svelte
View File

@ -64,6 +64,7 @@
let links = $state<HTMLAnchorElement[]>([]);
let container = $state<HTMLDivElement>();
let containerRect = $derived(container?.getBoundingClientRect());
let isInitialized = $state(false);
const linkRects = $derived(links.map((l) => l.getBoundingClientRect()));
@ -73,6 +74,16 @@
const isSecretPage = $derived(selectedIndex === -1);
$effect(() => {
if (containerRect && linkRects.length > 0 && links.length > 0) {
setTimeout(() => {
isInitialized = true;
}, 10);
} else {
isInitialized = false;
}
});
beforeNavigate((e) => {
const oldIndex = items.findIndex((i) =>
i.activeMatch(e.from?.url.pathname || ""),
@ -157,7 +168,7 @@
<div bind:this={container}>
<Panel class="max-w-[778px] w-screen h-20 flex items-center gap-3 relative">
{@const linkRect = linkRects.at(selectedIndex) || linkRects[0]}
{#if linkRect}
{#if linkRect && isInitialized}
<div
class="absolute bg-panel-highlight rounded-xl"
style="width: {linkRect.width}px; height: {linkRect.height}px; top: {linkRect.top -