srcdev-nuxt-components 9.1.10 → 9.1.12

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

@@ -5,7 +5,7 @@
     :class="[
       elementClasses,
       `site-navigation--${navAlign}`,
-      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen },
+      { 'is-collapsed': isCollapsed, 'is-loaded': isLoaded, 'menu-open': isMenuOpen, 'is-animated': isAnimated },
     ]"
     aria-label="Site navigation"
   >
@@ -113,6 +113,10 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+// ─── Animation gate — prevents indicator from transitioning on first paint ───
+
+const isAnimated = ref(false);
+
 // ─── Nav decorators (active / hover indicators) ─────────────────────────────
 
 const NAV_DECORATOR_DURATION = 200;
@@ -178,13 +182,6 @@ 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;
@@ -206,6 +203,7 @@ const resetHoverNavToActive = () => {
 };
 
 const initNavDecorators = () => {
+  cachedNavLinks = []; // invalidate — list may have been re-rendered (collapse toggle)
   if (!navListRef.value) return;
   const links = getNavLinks();
   if (!links.length) return;
@@ -287,13 +285,6 @@ 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;
@@ -338,21 +329,30 @@ const initPanelDecorators = () => {
 
 // ─────────────────────────────────────────────────────────────────────────────
 
-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);
+const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, activeHref, isActiveItem, toggleMenu, closeMenu } =
+  useNavCollapse("site-nav-loaded", {
+    onResize: async () => {
+      await nextTick(); // wait for Vue to re-render after any isCollapsed change
+      initNavDecorators();
+      if (isMenuOpen.value) {
+        setFinalPanelActivePositions(true);
+        setFinalPanelHoveredPositions(true);
+      }
     },
     onRouteChange: () => {
+      isAnimated.value = false;
       requestAnimationFrame(() => {
         initNavDecorators();
+        nextTick(() => {
+          isAnimated.value = true;
+        });
       });
     },
     onMounted: () => {
       initNavDecorators();
+      nextTick(() => {
+        isAnimated.value = true;
+      });
     },
   });
 
@@ -484,10 +484,15 @@ watch(
         scale: var(--_width-hovered, 0.001) 1;
         translate: var(--_x-hovered, 0) 0;
         transform-origin: left;
+        pointer-events: none;
+      }
+
+      .site-navigation.is-animated & .nav__hovered,
+      .site-navigation.is-animated & .nav__active,
+      .site-navigation.is-animated & .nav__active-indicator {
         transition:
           scale var(--_transition-duration, 200ms),
           translate var(--_transition-duration, 200ms);
-        pointer-events: none;
       }
 
       .nav__active {
@@ -672,10 +677,15 @@ watch(
           scale: 1 var(--_panel-height-hovered, 0.001);
           translate: 0 var(--_panel-y-hovered, 0);
           transform-origin: top;
+          pointer-events: none;
+        }
+
+        .site-navigation.is-animated & .nav__hovered,
+        .site-navigation.is-animated & .nav__active,
+        .site-navigation.is-animated & .nav__active-indicator {
           transition:
             scale var(--_panel-transition-duration, 200ms),
             translate var(--_panel-transition-duration, 200ms);
-          pointer-events: none;
         }
 
         .nav__active {

package/app/components/02.molecules/navigation/site-navigation/tests/__snapshots__/SiteNavigation.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`SiteNavigation > renders correct HTML structure 1`] = `
 "<nav class="site-navigation site-navigation--left is-loaded" aria-label="Site navigation">
   <ul class="site-nav-list" style="--_transition-duration: 0ms; --_x-active: 0px; --_width-active: NaN; --_x-hovered: 0px; --_width-hovered: NaN;">
-    <li class=""><a href="/" class="site-nav-link" data-nav-item="">
+    <li class="is-active"><a href="/" class="site-nav-link" data-nav-item="">
         <!--v-if--> Home
       </a></li>
     <li class=""><a href="/about" class="site-nav-link" data-nav-item="">

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -13,7 +13,6 @@
       v-if="!isCollapsed || !isLoaded"
       ref="navListRef"
       class="tab-nav-list"
-      @mousemove="handleNavMousemove"
       @mouseleave="hoveredItemHref = null"
     >
       <li
@@ -21,13 +20,13 @@
         :key="item.href"
         :data-href="item.href"
         :class="[item.cssName, { 'is-active': isActiveItem(item.href), 'is-hovered': hoveredItemHref === item.href }]"
+        @mouseenter="hoveredItemHref = item.href ?? null"
       >
         <NuxtLink
           :href="item.href"
           :external="item.isExternal || undefined"
           class="tab-nav-link"
           data-nav-item
-          @click="handleNavLinkClick"
         >
           <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
           {{ item.text }}
@@ -38,7 +37,7 @@
     </ul>
 
     <InputButtonCore
-      v-if="isCollapsed && isLoaded"
+      v-if="showCollapsed"
       class="tab-nav-burger"
       :class="{ 'is-open': isMenuOpen }"
       variant="tertiary"
@@ -56,7 +55,7 @@
 
     <Teleport to="body">
       <div
-        v-if="isCollapsed && isLoaded"
+        v-if="showCollapsed"
         class="tab-nav-backdrop"
         :class="{ 'is-open': isMenuOpen }"
         aria-hidden="true"
@@ -65,7 +64,7 @@
     </Teleport>
 
     <div
-      v-if="isCollapsed && isLoaded"
+      v-if="showCollapsed"
       id="tab-nav-panel"
       class="tab-nav-panel"
       :class="{ 'is-open': isMenuOpen }"
@@ -78,7 +77,7 @@
               :href="item.href"
               :external="item.isExternal || undefined"
               class="tab-nav-panel-link"
-              @click="handlePanelLinkClick"
+              @click="closeMenu"
             >
               <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
               {{ item.text }}
@@ -104,33 +103,11 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu, navigationStore } =
-  useNavCollapse(props.navItemData, "tab-nav-loaded");
-
-// Handle navigation link clicks to update store
-const handleNavLinkClick = (event: MouseEvent) => {
-  const target = (event.target as HTMLElement).closest<HTMLElement>("[href]");
-  if (!target) return;
-  const href = target.getAttribute("href");
-  if (href) navigationStore.handleNavLinkClick(href);
-};
-
-// Handle panel link clicks to update store and close menu
-const handlePanelLinkClick = (event: MouseEvent) => {
-  const target = (event.target as HTMLElement).closest<HTMLElement>("[href]");
-  if (!target) return;
-  const href = target.getAttribute("href");
-  if (href) navigationStore.handleNavLinkClick(href);
-  closeMenu();
-};
+const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =
+  useNavCollapse("tab-nav-loaded");
 
 const hoveredItemHref = ref<string | null>(null);
-
-const handleNavMousemove = (event: MouseEvent) => {
-  const li = (event.target as HTMLElement).closest<HTMLElement>("li[data-href]");
-  if (!li) return;
-  hoveredItemHref.value = li.dataset.href ?? null;
-};
+const showCollapsed = computed(() => isCollapsed.value && isLoaded.value);
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
@@ -167,8 +144,7 @@ watch(
 
     /* Decorators — horizontal nav */
     --_decorator-hovered-bg: var(--tab-nav-decorator-hovered-bg, transparent);
-    /* --_decorator-indicator-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor)); */
-    --_decorator-indicator-color: red;
+    --_decorator-indicator-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
 
     /* Horizontal nav */
     --_link-color: var(--tab-nav-link-color, var(--slate-01, currentColor));

package/app/components/02.molecules/navigation/tab-navigation/tests/__snapshots__/TabNavigation.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`TabNavigation > renders correct HTML structure 1`] = `
 "<nav class="tab-navigation tab-navigation--left is-loaded" aria-label="Site navigation">
   <ul class="tab-nav-list">
-    <li data-href="/" class=""><a href="/" class="tab-nav-link" data-nav-item="">
+    <li data-href="/" class="is-active"><a href="/" class="tab-nav-link" data-nav-item="">
         <!--v-if--> Home
       </a></li>
     <li data-href="/about" class=""><a href="/about" class="tab-nav-link" data-nav-item="">

package/app/composables/useNavCollapse.ts

@@ -1,5 +1,4 @@
 import { useResizeObserver, onClickOutside } from "@vueuse/core";
-import type { NavItemData } from "~/types/components";
 
 interface NavCollapseOptions {
   onResize?: () => void;
@@ -7,14 +6,13 @@ interface NavCollapseOptions {
   onMounted?: () => void;
 }
 
-export const useNavCollapse = (navItemData: NavItemData, stateKey: string, options: NavCollapseOptions = {}) => {
+export const useNavCollapse = (stateKey: string, options: NavCollapseOptions = {}) => {
   const navRef = ref<HTMLElement | null>(null);
   const navListRef = ref<HTMLUListElement | null>(null);
 
   const isCollapsed = ref(false);
   const isLoaded = useState(stateKey, () => false);
   const isMenuOpen = ref(false);
-  const isMounted = ref(false);
 
   // Stored natural width of the list — used when the list is not in the DOM
   let navListNaturalWidth = 0;
@@ -35,19 +33,17 @@ export const useNavCollapse = (navItemData: NavItemData, stateKey: string, optio
     isMenuOpen.value = false;
   };
 
-  const navigationStore = useNavigationStore();
+  // useRoute() in Nuxt is SSR-aware — route.path is consistent on server and client,
+  // so isActiveItem can be used directly without a isMounted guard.
   const route = useRoute();
 
-  const activeHref = computed(() => navigationStore.currentActiveHref);
-
-  // Client-side only active state check to prevent hydration mismatch
-  const isActiveItem = (href?: string) => isMounted.value && activeHref.value === href;
+  const activeHref = computed(() => route.path);
+  const isActiveItem = (href?: string) => href === route.path;
 
   watch(
     () => route.path,
-    (newPath) => {
+    () => {
       closeMenu();
-      navigationStore.syncWithRoute(navItemData.main ?? [], newPath);
       options.onRouteChange?.();
     },
     { flush: "post" }
@@ -68,8 +64,6 @@ export const useNavCollapse = (navItemData: NavItemData, stateKey: string, optio
     checkOverflow();
     isLoaded.value = true;
     await router.isReady();
-    navigationStore.initializeFromRoute(navItemData.main ?? [], route.path);
-    isMounted.value = true;
     options.onMounted?.();
   });
 
@@ -79,12 +73,10 @@ export const useNavCollapse = (navItemData: NavItemData, stateKey: string, optio
     isCollapsed,
     isLoaded,
     isMenuOpen,
-    isMounted,
     activeHref,
     checkOverflow,
     toggleMenu,
     closeMenu,
     isActiveItem,
-    navigationStore,
   };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.10",
+  "version": "9.1.12",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/app/stores/useNavigationStore.ts

@@ -1,113 +0,0 @@
-export const useNavigationStore = defineStore(
-  "useNavigationStore",
-  () => {
-    // State
-    const activeHref = ref<string | null>(null);
-    const isInitialized = ref(false);
-
-    // Getters
-    const currentActiveHref = computed(() => activeHref.value);
-
-    // Actions
-    const setActiveHref = (href: string | null) => {
-      activeHref.value = href;
-    };
-
-    /**
-     * Initialize active href based on current route and navigation items
-     * Used on component mount to handle deep links and initial page loads
-     */
-    const initializeFromRoute = (navItems: Array<{ href?: string }>, routePath: string) => {
-      if (isInitialized.value) return;
-
-      const items = navItems.filter((item): item is { href: string } => Boolean(item.href));
-
-      // Try exact match first
-      const exact = items.find((item) => routePath === item.href);
-      if (exact) {
-        activeHref.value = exact.href;
-        isInitialized.value = true;
-        return;
-      }
-
-      // Fall back to longest prefix match
-      const prefixMatches = items
-        .filter((item) => routePath.startsWith(item.href + "/"))
-        .sort((a, b) => b.href.length - a.href.length);
-
-      if (prefixMatches.length > 0) {
-        activeHref.value = prefixMatches[0]!.href;
-      } else {
-        // Default to null if no matches (let component handle fallback)
-        activeHref.value = null;
-      }
-
-      isInitialized.value = true;
-    };
-
-    /**
-     * Update active href when user clicks a navigation link
-     * Provides explicit control over active state
-     */
-    const handleNavLinkClick = (href: string) => {
-      activeHref.value = href;
-    };
-
-    /**
-     * Sync with route changes (for programmatic navigation)
-     * Re-runs the route matching logic when route changes
-     */
-    const syncWithRoute = (navItems: Array<{ href?: string }>, routePath: string) => {
-      const items = navItems.filter((item): item is { href: string } => Boolean(item.href));
-
-      // Try exact match first
-      const exact = items.find((item) => routePath === item.href);
-      if (exact) {
-        activeHref.value = exact.href;
-        return;
-      }
-
-      // Fall back to longest prefix match
-      const prefixMatches = items
-        .filter((item) => routePath.startsWith(item.href + "/"))
-        .sort((a, b) => b.href.length - a.href.length);
-
-      if (prefixMatches.length > 0) {
-        activeHref.value = prefixMatches[0]!.href;
-      }
-      // Don't reset to null if no matches - preserve existing active state
-    };
-
-    /**
-     * Reset store state (useful for testing or when navigation data changes)
-     */
-    const reset = () => {
-      activeHref.value = null;
-      isInitialized.value = false;
-    };
-
-    return {
-      // State
-      activeHref,
-      isInitialized,
-
-      // Getters
-      currentActiveHref,
-
-      // Actions
-      setActiveHref,
-      initializeFromRoute,
-      handleNavLinkClick,
-      syncWithRoute,
-      reset,
-    };
-  },
-  {
-    persist: {
-      storage: piniaPluginPersistedstate.sessionStorage(),
-      // Only persist the active href, not initialization state
-      // (we want to re-initialize on page refresh to handle route changes)
-      pick: ["activeHref"],
-    },
-  }
-);