fix: navbar

src/lib/components/Navbar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { replaceState } from "$app/navigation";
   import { page } from "$app/state";
+  import type { SectionName } from "$lib/sections/types";
   import { inviewportSections } from "$lib/stores/internal";
   import { sectionOrderPreferences } from "$lib/stores/preferences";
   import { Button, ScrollArea } from "bits-ui";
@@ -10,7 +11,28 @@
   let navbarElement = $state<HTMLDivElement>()!;
   let allLinks = $state<Record<string, HTMLAnchorElement>>({});
   let observer: IntersectionObserver;
-  let firstActive = $derived(Object.entries($inviewportSections).find(([, v]: [string, boolean]) => v === true)?.[0]);
+  let lowestActive = $derived(
+    Object.entries($inviewportSections)
+      .filter(([, v]) => v === true)
+      .reduce((lowest, [section]) => {
+        if (!lowest) return section;
+        const lowestElement = document.getElementById(lowest);
+        const currentElement = document.getElementById(section);
+        if (!lowestElement || !currentElement) return lowest;
+
+        const lowestBottom = lowestElement.getBoundingClientRect().bottom;
+        const currentBottom = currentElement.getBoundingClientRect().bottom;
+        return currentBottom >= lowestBottom ? section : lowest;
+      }, "") || location.hash.slice(1)
+  );
+
+  function handleSectionClick(sectionName: string) {
+    Object.keys($inviewportSections).forEach((key) => {
+      $inviewportSections[key as SectionName] = false;
+    });
+
+    $inviewportSections[sectionName as SectionName] = true;
+  }
 
   function scrollToTab(smooth = true, element?: HTMLElement | null) {
     const link = element ?? document.querySelector<HTMLAnchorElement>(`[href="${location.hash}"]`);
@@ -51,9 +73,9 @@
   });
 
   $effect(() => {
-    if (firstActive && page.state === "loaded") {
-      scrollToTab(true, allLinks[firstActive]);
-      replaceState("#" + firstActive, page.state);
+    if (lowestActive && page.state === "loaded") {
+      scrollToTab(true, allLinks[lowestActive]);
+      replaceState("#" + lowestActive, page.state);
     }
   });
 </script>
@@ -64,7 +86,7 @@
       <div class="bg-icon absolute bottom-[0.4375rem] z-1 h-[2px] w-[calc(100%+0.5rem)]"></div>
       <div class="absolute inset-0 bottom-2 group-data-[pinned=true]:group-data-[mode=dark]/html:bg-[#141414]/90 group-data-[pinned=true]:group-data-[mode=light]/html:bg-[#f0f0f0]/92"></div>
       {#each $sectionOrderPreferences as section}
-        <Button.Root href="#{section.name}" class="after:bg-icon data-[active=true]:text-text relative px-2 py-3 after:absolute after:top-full after:left-0 after:h-0 after:w-full after:origin-top after:rounded-full after:transition-all after:duration-100 hover:after:top-[calc(100%-4px)] hover:after:h-2 data-[active=true]:after:top-[calc(100%-4px)] data-[active=true]:after:h-2" data-active={$inviewportSections[section.name]} bind:el={allLinks[section.name]}>
+        <Button.Root href="#{section.name}" class="after:bg-icon data-[active=true]:text-text relative px-2 py-3 after:absolute after:top-full after:left-0 after:h-0 after:w-full after:origin-top after:rounded-full after:transition-all after:duration-100 hover:after:top-[calc(100%-4px)] hover:after:h-2 data-[active=true]:after:top-[calc(100%-4px)] data-[active=true]:after:h-2" data-active={lowestActive === section.name} bind:el={allLinks[section.name]} on:click={() => handleSectionClick(section.name)}>
           {section.name?.replaceAll("_", " ")}
         </Button.Root>
       {/each}