srcdev-nuxt-components 6.1.6 → 6.1.8

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -154,12 +154,22 @@ const props = defineProps({
   },
 })
 
-const slots = useSlots()
 const collapseNavigationBelowWidth = computed(
   () => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection
 )
 const collapseBreakpoint = ref(props.collapseBreakpoint)
-const navLoaded = ref(false)
+
+// Use global navigation state for caching between route changes
+const {
+  navLoaded,
+  navigationInitialized,
+  navigationWrapperRects: cachedNavigationWrapperRects,
+  secondaryNavRects: cachedSecondaryNavRects,
+  clearNavigationCache,
+} = useNavigationState()
+
+const slots = useSlots()
+
 const navigationWrapperRef = useTemplateRef("navigationWrapper")
 
 const closeAllNavigationDetails = () => {
@@ -215,6 +225,7 @@ const handleSummaryAction = (event: MouseEvent | KeyboardEvent) => {
   toggleDetailsElement(event)
 }
 
+// Initialize main navigation state
 const mainNavigationState = ref<ResponsiveHeaderState>({
   navListVisibility: {
     firstNav: false,
@@ -230,7 +241,13 @@ const setNavRef = (key: string, el: HTMLUListElement | null) => {
   navRefs.value[key] = el
 }
 
-const navigationWrapperRects = ref<IFlooredRect | null>(null)
+const navigationWrapperRects = computed({
+  get: () => cachedNavigationWrapperRects.value,
+  set: (value: IFlooredRect | null) => {
+    cachedNavigationWrapperRects.value = value
+  },
+})
+
 const firstNavRef = ref<HTMLUListElement | null>(null)
 const firstNavRects = ref<IFlooredRect | null>(null)
 
@@ -238,7 +255,12 @@ const secondNavRef = ref<HTMLUListElement | null>(null)
 const secondNavRects = ref<IFlooredRect | null>(null)
 
 const secondaryNavRef = useTemplateRef("secondaryNav")
-const secondaryNavRects = ref<IFlooredRect | null>(null)
+const secondaryNavRects = computed({
+  get: () => cachedSecondaryNavRects.value,
+  set: (value: IFlooredRect | null) => {
+    cachedSecondaryNavRects.value = value
+  },
+})
 
 const mainNavigationItemsRefs = useTemplateRef<HTMLLIElement[]>("mainNavigationItems")
 
@@ -323,7 +345,8 @@ const determineNavigationItemVisibility = (rect: DOMRect) => {
 const initMainNavigationState = () => {
   if (!mainNavigationItemsRefs.value) return
 
-  mainNavigationItemsRefs.value.forEach((item, index) => {
+  mainNavigationItemsRefs.value.forEach(async (item, index) => {
+    // await nextTick()
     const rect = item.getBoundingClientRect()
 
     const groupKey = item.dataset.groupKey
@@ -361,13 +384,8 @@ const initMainNavigationState = () => {
   })
 }
 
-onMounted(async () => {
-  await initTemplateRefs().then(() => {
-    setTimeout(() => {
-      navLoaded.value = true
-    }, 100)
-  })
-
+// Function to set up click outside listeners
+const setupClickOutsideListeners = () => {
   navigationDetailsRefs.value?.forEach((element, index) => {
     onClickOutside(element, () => {
       navigationDetailsRefs.value?.[index]?.removeAttribute("open")
@@ -378,6 +396,23 @@ onMounted(async () => {
     onClickOutside(overflowDetailsRef.value, () => {
       overflowDetailsRef.value?.removeAttribute("open")
     })
+}
+
+onMounted(async () => {
+  // If navigation is already initialized and loaded, skip the template refs setup
+  if (navigationInitialized.value && navLoaded.value) {
+    // But still set up click outside listeners as DOM elements may have changed
+    await nextTick()
+    setupClickOutsideListeners()
+    return
+  }
+
+  await initTemplateRefs().then(() => {
+    navLoaded.value = true
+    navigationInitialized.value = true
+  })
+
+  setupClickOutsideListeners()
 })
 
 useResizeObserver(navigationWrapperRef, async () => {
@@ -465,7 +500,7 @@ watch(
       }
 
       .main-navigation-item {
-        width: var(--_main-navigation-item-width);
+        /* width: var(--_main-navigation-item-width); */
         overflow: hidden;
         transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
         padding-block: var(--_link-focus-visible-outline-width);
@@ -478,7 +513,7 @@ watch(
           color: inherit;
           text-decoration: none;
           margin-inline-start: 0;
-          transition: var(--_link-visibility-transition);
+          /* transition: var(--_link-visibility-transition); */
 
           padding-block: var(--_link-padding-block);
           padding-inline: var(--_link-padding-inline);
@@ -496,7 +531,7 @@ watch(
           --_icon-transform: scaleY(1);
 
           margin-inline-start: 0;
-          transition: var(--_link-visibility-transition);
+          /* transition: var(--_link-visibility-transition); */
 
           &[open] {
             --_icon-transform: scaleY(-1);

package/app/composables/useNavigationState.ts

@@ -0,0 +1,26 @@
+import type { IFlooredRect } from "@/types/responsiveHeader"
+
+export const useNavigationState = () => {
+  // Simple reactive refs that persist across route changes using useState
+  const navLoaded = useState<boolean>("nav-loaded", () => false)
+  const navigationInitialized = useState<boolean>("nav-initialized", () => false)
+
+  // Navigation rects cache
+  const navigationWrapperRects = useState<IFlooredRect | null>("nav-wrapper-rects", () => null)
+  const secondaryNavRects = useState<IFlooredRect | null>("secondary-nav-rects", () => null)
+
+  const clearNavigationCache = () => {
+    navLoaded.value = false
+    navigationInitialized.value = false
+    navigationWrapperRects.value = null
+    secondaryNavRects.value = null
+  }
+
+  return {
+    navLoaded,
+    navigationInitialized,
+    navigationWrapperRects,
+    secondaryNavRects,
+    clearNavigationCache,
+  }
+}

package/nuxt.config.ts

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
       name: "layout",
       mode: "out-in",
     },
+    keepalive: true,
   },
   components: [
     {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.6",
+  "version": "6.1.8",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",