@iqual/nuxt-icms 1.3.0 → 1.4.0

package/components/Section/Header/MetaMenu.vue

@@ -1,69 +1,71 @@
 <template>
-  <nav class="mb-8 2xl:mb-0 2xl:py-0">
+  <nav
+    :aria-label="
+      $texts('meta_navigation.nav_aria_label', 'Meta navigation menu')
+    "
+    :class="themedClass('containerClass')"
+  >
     <ul
-      role="menu"
-      class="flex size-full flex-col flex-wrap justify-end text-base 2xl:flex-row 2xl:items-center 2xl:gap-8 2xl:font-medium"
+      :class="
+        themedClass(
+          'listClass',
+          'flex flex-col gap-2 text-base 2xl:flex-row 2xl:flex-wrap 2xl:items-center 2xl:justify-end 2xl:gap-8',
+        )
+      "
     >
       <li
         v-for="(menuItem, index) in menuItems"
         :key="`meta_${index}`"
-        role="menuitem"
-        class="group/main relative flex flex-col items-stretch 2xl:flex-row"
+        :class="
+          themedClass(
+            'listItemClass',
+            'group/main relative flex flex-col items-stretch 2xl:flex-row',
+          )
+        "
       >
-        <VuepalLink
-          :to="menuItem?.href"
-          class="group-hover/main:text-primary-500 flex w-full items-center justify-between py-1 motion-safe:transition-colors motion-safe:duration-200 2xl:size-auto 2xl:py-0"
-          :class="
-            menuItem?.href === menuItemActive?.href
-              ? 'text-primary-500'
-              : 'text-black'
-          "
-          @click="onLangDropdownLinkClick"
-        >
-          {{ menuItem.label }}
-        </VuepalLink>
+        <template v-if="menuItem?.href">
+          <NuxtLink
+            :to="menuItem.href"
+            :title="menuItem.label"
+            :aria-current="
+              menuItem?.href === menuItemActive?.href ? 'page' : undefined
+            "
+            :target="menuItem?.target"
+            :rel="menuItem?.rel"
+            @click="close()"
+            exact-active-class="text-primary"
+            :class="
+              cn(
+                themedClass(
+                  'linkClass',
+                  '2xl:group-hover/main:text-primary flex w-full items-center justify-between motion-safe:transition-colors motion-safe:duration-200 2xl:size-auto',
+                ),
+                menuItem?.additionalClass,
+              )
+            "
+          >
+            {{ menuItem.label }}
+          </NuxtLink>
+        </template>
+        <template v-else>
+          <span
+            aria-disabled="true"
+            :class="themedClass('noLinkClass', 'cursor-default text-gray-400')"
+          >
+            {{ menuItem.label }}
+          </span>
+        </template>
       </li>
     </ul>
   </nav>
-  <div
-    v-if="props.links?.length !== 0"
-    class="mb-8 flex gap-8 2xl:mb-0 2xl:ml-8"
-  >
-    <DesignSystemAtomsButton
-      v-for="(link, key) in links"
-      :key="key"
-      :label="link?.label"
-      :subline="link?.subline"
-      :title="link?.title"
-      :link="link?.link?.uri?.path"
-      :params="link?.params"
-      :target-blank="link?.targetBlank"
-      :style="link?.buttonStyle"
-      buttonClass="no-underline"
-      @click="onLangDropdownLinkClick"
-    />
-  </div>
 </template>
 
 <script setup lang="ts">
-import type { GlobalConfigFragment } from '#build/graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const { menuItems, menuItemActive } = await useMenu('metaMenu')
-
-const props = defineProps<{
-  links?: GlobalConfigFragment['contactButtons']
-}>()
-
-const emit = defineEmits(['meta:empty', 'lang-dropdown:change'])
-
-if (menuItems.value?.length === 0) {
-  emit('meta:empty')
-}
-
-const langSwitchDropdownOpen = ref(false)
-
-const onLangDropdownLinkClick = () => {
-  emit('lang-dropdown:change')
-  langSwitchDropdownOpen.value = false
-}
+const themedClass = useTheme()
+const { $texts } = useNuxtApp()
+const { close } = useMobileMenuOverlayBus()
 </script>

package/components/Section/Header/MobileMainMenu.vue

@@ -0,0 +1,23 @@
+<template>
+  <nav
+    :aria-label="$texts('main_menu.nav_aria_label', 'Main navigation')"
+    :class="themedClass('containerClass')"
+  >
+    <ul role="menu" :class="themedClass('listClass', 'flex flex-col gap-2')">
+      <MobileMainMenuItem
+        v-for="item in menuItems"
+        :key="item.id"
+        :item="item"
+        :menuItemActive="menuItemActive"
+      />
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import MobileMainMenuItem from './MobileMainMenuItem.vue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const { menuItems, menuItemActive } = await useMenu('mainMenu')
+
+const themedClass = useTheme()
+</script>

package/components/Section/Header/MobileMainMenuItem.vue

@@ -0,0 +1,191 @@
+<template>
+  <li
+    role="menuitem"
+    :class="themedClass('listItemClass', 'relative flex flex-col gap-2')"
+  >
+    <div
+      :class="
+        themedClass('linkContainerClass', 'flex items-center justify-between')
+      "
+    >
+      <component
+        :is="elementType"
+        v-bind="componentAttrs"
+        @click="isLink && close()"
+      >
+        {{ item.label }}
+      </component>
+      <SpriteSymbol
+        v-if="hasSubmenu"
+        name="chevron-down"
+        :aria-label="
+          $texts('mobile_main_menu.submenu_toggle', 'Toggle submenu')
+        "
+        :aria-expanded="isOpen"
+        :aria-controls="submenuId"
+        role="button"
+        tabindex="0"
+        @click="isOpen = !isOpen"
+        :class="[
+          themedClass(
+            'submenuToggleClass',
+            'size-5 cursor-pointer motion-safe:transition-transform motion-safe:duration-300',
+          ),
+          { 'rotate-180': isOpen },
+        ]"
+      />
+    </div>
+    <Transition
+      v-if="hasSubmenu"
+      :enter-active-class="
+        themedClass(
+          'transitionEnterActiveClass',
+          'transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden',
+        )
+      "
+      :enter-from-class="
+        themedClass('transitionEnterFromClass', 'max-h-0 opacity-0')
+      "
+      :enter-to-class="
+        themedClass('transitionEnterToClass', 'max-h-96 opacity-100')
+      "
+      :leave-active-class="
+        themedClass(
+          'transitionLeaveActiveClass',
+          'transition-[max-height,opacity] duration-300 ease-in-out overflow-hidden',
+        )
+      "
+      :leave-from-class="
+        themedClass('transitionLeaveFromClass', 'max-h-96 opacity-100')
+      "
+      :leave-to-class="
+        themedClass('transitionLeaveToClass', 'max-h-0 opacity-0')
+      "
+    >
+      <ul
+        v-show="isOpen"
+        :id="submenuId"
+        :class="themedClass('submenuListClass', 'flex flex-col gap-2 pl-4')"
+      >
+        <MobileMainMenuItem
+          v-for="item in item.children"
+          :key="`submenu_${item.id}`"
+          :item="item"
+          :menuItemActive="menuItemActive"
+        />
+      </ul>
+    </Transition>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { MappedMenuLink } from '@/packages/nuxt-icms/plugins/initData'
+import { NuxtLink } from '#components'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const route = useRoute()
+const themedClass = useTheme()
+const { close } = useMobileMenuOverlayBus()
+
+const props = defineProps<{
+  item: MappedMenuLink
+  menuItemActive?: MappedMenuLink | undefined
+}>()
+
+const { item, menuItemActive } = props
+
+const isOpen = ref(false)
+const isLink = computed(() => Boolean(item.href))
+const hasSubmenu = computed(() => (item.children?.length ?? 0) > 0)
+const submenuId = computed(() => `${item.id}-submenu`)
+const hasActiveChild = computed(() => {
+  /**
+   * Determines whether the current menu item has any active descendant links.
+   *
+   * @remarks
+   * Recursively checks all nested children to see if any item's `href`
+   * matches the current route path. Used to keep parent menus open
+   * when navigating within their nested structure.
+   *
+   * @returns A computed boolean that is `true` if the current route
+   * matches any descendant link, otherwise `false`.
+   */
+  const matchInTree = (children?: MappedMenuLink[]): boolean =>
+    !!children?.some(
+      (child) => child.href === route.fullPath || matchInTree(child.children),
+    )
+  return matchInTree(item.children)
+})
+
+watch(
+  () => route.fullPath,
+  () => {
+    isOpen.value = hasActiveChild.value
+  },
+  { immediate: true },
+)
+
+/**
+ * Determines which element type to render for a menu item.
+ *
+ * @remarks
+ * - Returns `NuxtLink` if the item has a navigation link.
+ * - Returns `'button'` if the item opens a submenu but has no link.
+ * - Returns `'span'` if the item is non-interactive.
+ *
+ * @returns A computed reference containing either `NuxtLink`, `'button'`, or `'span'`.
+ */
+const elementType = computed(() => {
+  if (isLink.value) return NuxtLink
+  else if (hasSubmenu.value) return 'button'
+  else return 'span'
+})
+
+/**
+ * Computes the appropriate HTML or component attributes for a menu item
+ * based on its computed element type.
+ *
+ * @returns A computed object containing attributes specific to the element type,
+ * including accessibility props and themed CSS classes.
+ */
+const componentAttrs = computed(() => {
+  switch (elementType.value) {
+    case NuxtLink:
+      return {
+        id: item.id,
+        to: item.href,
+        rel: item.rel,
+        target: item.target,
+        'aria-haspopup': hasSubmenu.value ? 'menu' : undefined,
+        'aria-expanded': hasSubmenu.value ? isOpen.value : undefined,
+        'aria-controls': hasSubmenu.value ? submenuId.value : undefined,
+        'aria-current': menuItemActive?.id === item.id ? 'page' : undefined,
+        tabindex: 0,
+        class: cn(themedClass('linkClass'), item.additionalClass),
+        'exact-active-class': 'text-primary',
+      }
+
+    case 'button':
+      return {
+        id: item.id,
+        type: 'button',
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen.value,
+        'aria-controls': submenuId.value,
+        tabindex: 0,
+        class: themedClass('buttonClass'),
+      }
+
+    case 'span':
+      return {
+        id: item.id,
+        'aria-disabled': true,
+        class: themedClass('nolinkClass', 'text-gray-400'),
+      }
+
+    default:
+      return {}
+  }
+})
+</script>