feat: APPS-2916 fix hydration and undefined errors

src/lib-components/HeaderMain.vue

@@ -32,8 +32,15 @@ const parseTitle = computed(() => {
 
 <template>
   <header class="header-main">
-    <NavSecondary :items="secondaryNav" :is-microsite="parseTitle" />
-    <NavPrimary class="primary" :items="primaryNav" :title="title" />
+    <NavSecondary
+      :items="secondaryNav"
+      :is-microsite="parseTitle"
+    />
+    <NavPrimary
+      class="primary"
+      :items="primaryNav"
+      :title="title"
+    />
   </header>
 </template>
 

src/lib-components/HeaderSmart.vue

@@ -1,56 +1,71 @@
-<script>
-import { mapState } from 'pinia'
+<script setup>
+import { markRaw, onMounted, ref, watch } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '@/stores/GlobalStore'
 import SiteBrandBar from '@/lib-components/SiteBrandBar'
 import HeaderMainResponsive from '@/lib-components/HeaderMainResponsive'
 import HeaderMain from '@/lib-components/HeaderMain'
-import { useGlobalStore } from '@/stores/GlobalStore'
 
-export default {
-  name: 'HeaderSmart',
-  components: {
-    SiteBrandBar,
-    HeaderMainResponsive,
-    HeaderMain,
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
   },
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
+})
+
+// Access the global store
+const globalStore = useGlobalStore()
+const { header } = storeToRefs(globalStore)
+
+// Use refs for primary, secondary menu items, and header type
+const primaryMenuItems = ref(header.value.primary || [])
+const secondaryMenuItems = ref(header.value.secondary || [])
+
+// Mark components as raw to prevent them from being reactive
+const currentHeader = ref(markRaw(HeaderMain))
+
+const isMobile = ref(false)
+onMounted(() => {
+  const { width } = useWindowSize()
+  watch(width, (newWidth) => {
+    console.log('newWidth', newWidth)
+    isMobile.value = newWidth <= 1200
+    currentHeader.value = markRaw(isMobile.value ? HeaderMainResponsive : HeaderMain)
   },
-  computed: {
-    ...mapState(useGlobalStore, ['header', 'winWidth']),
-    primaryMenuItems() {
-      return this.header.primary
-    },
-    secondaryMenuItems() {
-      return this.header.secondary
-    },
-    isMobile() {
-      return this.winWidth <= 1024
-    },
-    whichHeader() {
-      return this.isMobile ? 'header-main-responsive' : 'header-main'
+  { immediate: true })
+
+  watch(
+    header,
+    (newVal, oldVal) => {
+      console.log('Header updated from parent page', newVal, oldVal)
+      primaryMenuItems.value = newVal.primary
+      secondaryMenuItems.value = newVal.secondary
     },
-  },
-}
+    { deep: true, immediate: true }
+  )
+})
 </script>
 
 <template>
   <header class="header-smart">
     <SiteBrandBar class="brand-bar" />
     <component
-      :is="whichHeader" :class="isMobile ? 'mobile-header' : 'desktop-header'" :primary-nav="primaryMenuItems"
-      :secondary-nav="secondaryMenuItems" :title="title"
+      :is="currentHeader"
+      :class="isMobile ? 'mobile-header' : 'desktop-header'"
+      :primary-nav="primaryMenuItems"
+      :secondary-nav="secondaryMenuItems"
+      :title="title"
     />
   </header>
 </template>
 
 <style lang="scss" scoped>
 @media #{$medium} {
-    .brand-bar {
-        position: absolute;
-        width: 100%;
-    }
+  .brand-bar {
+    position: absolute;
+    width: 100%;
+  }
 }
 </style>

src/lib-components/IconWithLink.vue

@@ -209,65 +209,86 @@ export default {
 
 <template>
   <div class="icon-with-link">
-    <SmartLink v-if="to" :to="to" class="icon-with-link-container link">
-      <component :is="iconName" class="icon" aria-hidden="true" />
-      <div class="text" v-text="text" />
+    <SmartLink
+      v-if="to"
+      :to="to"
+      class="icon-with-link-container link"
+    >
+      <component
+        :is="iconName"
+        class="icon"
+        aria-hidden="true"
+      />
+      <div
+        class="text"
+        v-text="text"
+      />
     </SmartLink>
-    <div v-else class="icon-with-link-container">
-      <component :is="iconName" class="icon" aria-hidden="true" />
-      <div class="text" v-text="text" />
+    <div
+      v-else
+      class="icon-with-link-container"
+    >
+      <component
+        :is="iconName"
+        class="icon"
+        aria-hidden="true"
+      />
+      <div
+        class="text"
+        v-text="text"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .icon-with-link {
-    --link-color: var(--color-primary-blue-03);
-    --icon-color: var(--color-primary-blue-03);
-    --icon-color-highlight: var(--color-default-cyan-03);
+  --link-color: var(--color-primary-blue-03);
+  --icon-color: var(--color-primary-blue-03);
+  --icon-color-highlight: var(--color-default-cyan-03);
 
-    display: inline-block;
-    line-height: 1;
+  display: inline-block;
+  line-height: 1;
 
-    .text {
-        @include button;
-        white-space: pre-wrap;
-    }
+  .text {
+    @include button;
+    white-space: pre-wrap;
+  }
 
-    .link {
-        color: var(--link-color);
-    }
+  .link {
+    color: var(--link-color);
+  }
 
-    .icon-with-link-container {
-        display: inline-flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        align-items: center;
-        gap: var(--space-xs);
-    }
+  .icon-with-link-container {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--space-xs);
+  }
 
-    .icon {
-        flex-shrink: 0;
+  .icon {
+    flex-shrink: 0;
 
-        .svg__stroke--primary-blue-03 {
-            stroke: var(--icon-color);
-        }
+    .svg__stroke--primary-blue-03 {
+      stroke: var(--icon-color);
+    }
 
-        .svg__fill--primary-blue-03 {
-            fill: var(--icon-color);
-        }
+    .svg__fill--primary-blue-03 {
+      fill: var(--icon-color);
+    }
 
-        .svg__stroke--default-cyan-03 {
-            stroke: var(--icon-color-highlight);
-        }
+    .svg__stroke--default-cyan-03 {
+      stroke: var(--icon-color-highlight);
     }
+  }
 
-    // Hover states
-    @media #{$has-hover} {
-        .link:hover {
-            @include link-hover;
-        }
+  // Hover states
+  @media #{$has-hover} {
+    .link:hover {
+      @include link-hover;
     }
+  }
 }
 </style>