srcdev-nuxt-components 9.1.8 → 9.1.10

package/.claude/settings.json

@@ -16,7 +16,9 @@
       "Bash(npx tsc:*)",
       "Bash(npx vitest:*)",
       "Bash(git show:*)",
-      "Edit(/.claude/skills/components/**)"
+      "Edit(/.claude/skills/components/**)",
+      "Bash(npx nuxi:*)",
+      "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",

package/app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue

@@ -17,7 +17,11 @@
       @mouseleave="resetHoverNavToActive"
       @mouseover="handleNavHover"
     >
-      <li v-for="item in navItemData.main" :key="item.href" :class="item.cssName">
+      <li
+        v-for="item in navItemData.main"
+        :key="item.href"
+        :class="[item.cssName, { 'is-active': isActiveItem(item.href) }]"
+      >
         <NuxtLink :href="item.href" :external="item.isExternal || undefined" class="site-nav-link" data-nav-item>
           <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
           {{ item.text }}
@@ -70,7 +74,11 @@
           @mouseover="handlePanelHover"
           @mouseleave="resetHoverPanelToActive"
         >
-          <li v-for="item in navItemData.main" :key="item.href" :class="item.cssName">
+          <li
+            v-for="item in navItemData.main"
+            :key="item.href"
+            :class="[item.cssName, { 'is-active': isActiveItem(item.href) }]"
+          >
             <NuxtLink
               :href="item.href"
               :external="item.isExternal || undefined"
@@ -92,7 +100,6 @@
 </template>
 
 <script setup lang="ts">
-import { useResizeObserver, onClickOutside } from "@vueuse/core";
 import type { NavItemData } from "~/types/components";
 
 interface Props {
@@ -106,35 +113,6 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const navRef = ref<HTMLElement | null>(null);
-const navListRef = ref<HTMLUListElement | null>(null);
-
-const isCollapsed = ref(false);
-const isLoaded = useState("site-nav-loaded", () => false);
-const isMenuOpen = ref(false);
-
-// Stored natural width of the list — used when the list is not in the DOM
-let navListNaturalWidth = 0;
-
-const checkOverflow = () => {
-  if (!navRef.value) return;
-
-  // Measure and store the list width whenever it's in the DOM
-  if (navListRef.value) {
-    navListNaturalWidth = navListRef.value.scrollWidth;
-  }
-
-  isCollapsed.value = navListNaturalWidth > navRef.value.clientWidth;
-};
-
-const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value;
-};
-
-const closeMenu = () => {
-  isMenuOpen.value = false;
-};
-
 // ─── Nav decorators (active / hover indicators) ─────────────────────────────
 
 const NAV_DECORATOR_DURATION = 200;
@@ -200,6 +178,13 @@ const moveNavHoveredIndicator = () => {
 const handleNavLinkClick = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-nav-item]");
   if (!target) return;
+
+  // Update store with clicked href for reliable active state tracking
+  const href = target.getAttribute("href");
+  if (href) {
+    navigationStore.handleNavLinkClick(href);
+  }
+
   currentActiveNavLink = target;
   currentHoveredNavLink = target;
   previousHoveredNavLink = target;
@@ -230,10 +215,7 @@ const initNavDecorators = () => {
     navSnapTimer = null;
   }
 
-  const activeLink =
-    links.find((el) => el.classList.contains("router-link-exact-active")) ??
-    links.find((el) => el.classList.contains("router-link-active")) ??
-    links[0];
+  const activeLink = links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
   if (!activeLink) return;
 
   currentActiveNavLink = activeLink;
@@ -305,6 +287,13 @@ const movePanelHoveredIndicator = () => {
 const handlePanelLinkClick = (event: MouseEvent) => {
   const target = (event.target as HTMLElement).closest<HTMLElement>("[data-panel-nav-item]");
   if (!target) return;
+
+  // Update store with clicked href for reliable active state tracking
+  const href = target.getAttribute("href");
+  if (href) {
+    navigationStore.handleNavLinkClick(href);
+  }
+
   currentActivePanelLink = target;
   currentHoveredPanelLink = target;
   previousHoveredPanelLink = target;
@@ -336,10 +325,7 @@ const initPanelDecorators = () => {
     panelSnapTimer = null;
   }
 
-  const activeLink =
-    links.find((el) => el.classList.contains("router-link-exact-active")) ??
-    links.find((el) => el.classList.contains("router-link-active")) ??
-    links[0];
+  const activeLink = links.find((el) => el.getAttribute("href") === activeHref.value) ?? links[0];
   if (!activeLink) return;
 
   currentActivePanelLink = activeLink;
@@ -352,52 +338,23 @@ const initPanelDecorators = () => {
 
 // ─────────────────────────────────────────────────────────────────────────────
 
-// Close panel on navigation and re-init decorators.
-// flush: 'post' ensures router-link-active classes are applied.
-// requestAnimationFrame defers the measurement until after browser layout,
-// preventing stale offsetLeft reads and racing with hover setTimeouts.
-const route = useRoute();
-watch(
-  () => route.path,
-  () => {
-    closeMenu();
-    requestAnimationFrame(() => {
+const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isActiveItem, toggleMenu, closeMenu, navigationStore } =
+  useNavCollapse(props.navItemData, "site-nav-loaded", {
+    onResize: () => {
+      setFinalNavActivePositions(true);
+      setFinalNavHoveredPositions(true);
+      setFinalPanelActivePositions(true);
+      setFinalPanelHoveredPositions(true);
+    },
+    onRouteChange: () => {
+      requestAnimationFrame(() => {
+        initNavDecorators();
+      });
+    },
+    onMounted: () => {
       initNavDecorators();
-    });
-  },
-  { flush: "post" }
-);
-
-useResizeObserver(navRef, () => {
-  checkOverflow();
-  if (!isCollapsed.value) closeMenu();
-  setFinalNavActivePositions(true);
-  setFinalNavHoveredPositions(true);
-  setFinalPanelActivePositions(true);
-  setFinalPanelHoveredPositions(true);
-});
-
-onClickOutside(navRef, closeMenu);
-
-const router = useRouter();
-
-onMounted(async () => {
-  await nextTick();
-  checkOverflow();
-  isLoaded.value = true;
-  await router.isReady();
-  requestAnimationFrame(() => {
-    initNavDecorators();
+    },
   });
-});
-
-watch(isCollapsed, async (collapsed) => {
-  if (!collapsed) {
-    cachedNavLinks = []; // nav <ul> was re-rendered — invalidate cache
-    await nextTick();
-    initNavDecorators();
-  }
-});
 
 watch(isMenuOpen, async (open) => {
   if (open) {
@@ -583,10 +540,9 @@ watch(
           color: var(--_link-hover-color);
           outline: none;
         }
-
-        &.router-link-exact-active {
-          color: var(--_link-active-color);
-        }
+      }
+      li.is-active .site-nav-link {
+        color: var(--_link-active-color);
       }
     }
 
@@ -776,10 +732,9 @@ watch(
             color: var(--_panel-link-hover-color);
             outline: none;
           }
-
-          &.router-link-exact-active {
-            color: var(--_panel-link-active-color);
-          }
+        }
+        li.is-active .site-nav-panel-link {
+          color: var(--_panel-link-active-color);
         }
       }
     }