@iqual/nuxt-icms 1.0.2

package/components/Section/Header/GlobalMenu.vue

@@ -0,0 +1,337 @@
+<template>
+  <nav
+    ref="globalMenu"
+    class="z-30 mb-8 border-b-1 border-b-gray-100 py-8 lg:mb-0 lg:h-full lg:border-0 lg:py-0 lg:pl-12"
+    v-on="!isMobile ? { mouseleave: onNavbarMouseLeave } : {}"
+  >
+    <ul
+      role="menu"
+      class="flex flex-col flex-wrap justify-end text-base lg:h-full lg:flex-row lg:items-center lg:gap-8 lg:border-0 lg:font-medium"
+    >
+      <li
+        v-for="(link, mainIndex) in links"
+        :key="`global_${mainIndex}`"
+        role="menuitem"
+        class="group/main relative flex flex-col items-stretch lg:h-full lg:flex-row"
+      >
+        <VuepalLink
+          :to="link.link?.url?.path"
+          :aria-controls="'firstLevel-' + mainIndex"
+          :aria-expanded="hoverMain === mainIndex"
+          :aria-haspopup="!!link.subtree?.length"
+          class="flex w-full items-center justify-between whitespace-nowrap group-hover/main:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:size-auto lg:py-0"
+          :class="
+            link.link?.url?.path === currentActiveMainLink?.link.url?.path
+              ? 'text-primary-500'
+              : 'text-black'
+          "
+          @mouseenter="!isMobile && onMenuInteraction('main', mainIndex)"
+          @mouseleave="!isMobile && onMouseLeave()"
+          @click="onLinkClick"
+        >
+          {{ link.link.label }}
+          <div
+            class="grid size-10 place-content-center lg:size-auto"
+            @click.prevent.stop="
+              isMobile && onMenuInteraction('main', mainIndex)
+            "
+          >
+            <SpriteSymbol
+              v-show="link.subtree.length"
+              name="chevron-down"
+              :aria-label="
+                isMobile
+                  ? $texts('header.submenu_toggle', 'Toggle submenu')
+                  : undefined
+              "
+              :aria-hidden="!isMobile"
+              class="size-5 cursor-pointer text-black transition-transform duration-300 lg:ml-2"
+              :class="{
+                'rotate-180': isMobile ? hoverMain === mainIndex : false,
+                'lg:rotate-180': !isMobile && hoverMain === mainIndex,
+              }"
+            />
+          </div>
+        </VuepalLink>
+
+        <!-- First level menu -->
+        <transition :name="isMobile ? 'slideDown' : 'fade'">
+          <div
+            v-show="link.subtree?.length && hoverMain === mainIndex"
+            :id="'firstLevel-' + mainIndex"
+            class="w-max min-w-full lg:absolute lg:left-0 lg:top-full lg:border lg:border-gray-100 lg:bg-white lg:text-sm"
+          >
+            <ul role="menu" class="ml-4 lg:ml-0">
+              <li
+                v-for="(firstLevelLink, firstLevelIndex) in link.subtree"
+                :key="`firstLevel_${firstLevelIndex}`"
+                role="menuitem"
+                class="group/first relative"
+                @mouseleave="!isMobile && onMouseLeave()"
+              >
+                <VuepalLink
+                  :to="firstLevelLink.link.url?.path"
+                  :aria-controls="'secondLevel-' + firstLevelIndex"
+                  :aria-expanded="hoverFirst === firstLevelIndex"
+                  :aria-haspopup="!!firstLevelLink.subtree.length"
+                  class="flex w-full items-center justify-between whitespace-nowrap no-underline group-hover/first:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:px-4 lg:py-3"
+                  :class="
+                    firstLevelLink.link?.url?.path ===
+                    activeFirstLevelLink?.link.url?.path
+                      ? 'text-primary-500'
+                      : 'text-black'
+                  "
+                  @mouseenter="
+                    !isMobile && onMenuInteraction('first', firstLevelIndex)
+                  "
+                  @mouseleave="!isMobile && onMouseLeave()"
+                  @click="onLinkClick"
+                >
+                  {{ firstLevelLink.link.label }}
+                  <div
+                    class="grid size-10 place-content-center lg:size-auto"
+                    @click.prevent.stop="
+                      isMobile && onMenuInteraction('first', firstLevelIndex)
+                    "
+                  >
+                    <SpriteSymbol
+                      v-show="firstLevelLink.subtree.length"
+                      name="chevron-down"
+                      :aria-label="
+                        isMobile
+                          ? $texts('header.submenu_toggle', 'Toggle submenu')
+                          : undefined
+                      "
+                      :aria-hidden="!isMobile"
+                      class="size-5 cursor-pointer text-black transition-transform duration-300 lg:ml-2 lg:size-4 lg:-rotate-90"
+                      :class="{
+                        'rotate-180': isMobile
+                          ? hoverFirst === firstLevelIndex
+                          : false,
+                      }"
+                    />
+                  </div>
+                </VuepalLink>
+
+                <!-- Second level menu -->
+                <transition :name="isMobile ? 'slideDown' : 'fade'">
+                  <div
+                    v-show="
+                      firstLevelLink.subtree?.length &&
+                      hoverFirst === firstLevelIndex
+                    "
+                    :id="'secondLevel-' + firstLevelIndex"
+                    class="min-w-full lg:absolute lg:-top-px lg:left-full lg:border lg:border-gray-100 lg:bg-white lg:text-sm"
+                  >
+                    <ul role="menu" class="ml-4 lg:ml-0">
+                      <li
+                        v-for="(
+                          secondLevelLink, secondLevelIndex
+                        ) in firstLevelLink.subtree"
+                        :key="`secondLevel_${secondLevelIndex}`"
+                        role="menuitem"
+                        class="group/second relative"
+                      >
+                        <VuepalLink
+                          :to="secondLevelLink.link.url?.path"
+                          :aria-controls="'thirdLevel-' + secondLevelIndex"
+                          :aria-expanded="hoverSecond === secondLevelIndex"
+                          :aria-haspopup="!!secondLevelLink.subtree.length"
+                          class="flex w-full items-center justify-between whitespace-nowrap no-underline group-hover/second:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:px-4 lg:py-3"
+                          :class="
+                            secondLevelLink.link?.url?.path ===
+                            activeSecondLevelLink?.link.url?.path
+                              ? 'text-primary-500'
+                              : 'text-black'
+                          "
+                          @mouseenter="
+                            !isMobile &&
+                            onMenuInteraction('second', secondLevelIndex)
+                          "
+                          @mouseleave="!isMobile && onMouseLeave()"
+                          @click="onLinkClick"
+                        >
+                          {{ secondLevelLink.link.label }}
+                          <div
+                            class="grid size-10 place-content-center lg:size-auto"
+                            @click.prevent.stop="
+                              isMobile &&
+                              onMenuInteraction('first', firstLevelIndex)
+                            "
+                          >
+                            <SpriteSymbol
+                              v-show="secondLevelLink.subtree.length"
+                              name="chevron-down"
+                              :aria-label="
+                                isMobile
+                                  ? $texts(
+                                      'header.submenu_toggle',
+                                      'Toggle submenu',
+                                    )
+                                  : undefined
+                              "
+                              :aria-hidden="!isMobile"
+                              class="size-5 cursor-pointer text-black transition-transform duration-300 lg:ml-2 lg:size-4 lg:-rotate-90"
+                              :class="{
+                                'rotate-180': isMobile
+                                  ? hoverSecond === secondLevelIndex
+                                  : false,
+                              }"
+                            />
+                          </div>
+                        </VuepalLink>
+
+                        <!-- Third level menu -->
+                        <transition :name="isMobile ? 'slideDown' : 'fade'">
+                          <div
+                            v-show="
+                              secondLevelLink.subtree?.length &&
+                              hoverSecond === secondLevelIndex
+                            "
+                            :id="'thirdLevel-' + secondLevelIndex"
+                            class="min-w-full lg:absolute lg:-top-px lg:left-full lg:border lg:border-gray-100 lg:bg-white lg:text-sm"
+                          >
+                            <ul role="menu" class="ml-4 lg:ml-0">
+                              <li
+                                v-for="(
+                                  thirdLevelLink, thirdLevelIndex
+                                ) in secondLevelLink.subtree"
+                                :key="`thirdLevel_${thirdLevelIndex}`"
+                                role="menuitem"
+                                class="group/third relative"
+                              >
+                                <VuepalLink
+                                  :to="thirdLevelLink.link.url?.path"
+                                  class="flex h-10 w-full items-center whitespace-nowrap no-underline group-hover/third:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:h-auto lg:px-4 lg:py-3"
+                                  :class="
+                                    thirdLevelLink.link?.url?.path ===
+                                    activeThirdLevelLink?.link.url?.path
+                                      ? 'text-primary-500'
+                                      : 'text-black'
+                                  "
+                                  @mouseenter="
+                                    onMenuInteraction('third', thirdLevelIndex)
+                                  "
+                                  @click="onLinkClick"
+                                >
+                                  {{ thirdLevelLink.link.label }}
+                                </VuepalLink>
+                              </li>
+                            </ul>
+                          </div>
+                        </transition>
+                      </li>
+                    </ul>
+                  </div>
+                </transition>
+              </li>
+            </ul>
+          </div>
+        </transition>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+type menuLevel = 'main' | 'first' | 'second' | 'third'
+
+const globalMenu = ref<HTMLElement | null>(null)
+const { isMobile } = useIsMobile()
+const {
+  links,
+  currentActiveMainLink,
+  activeFirstLevelLink,
+  activeSecondLevelLink,
+  activeThirdLevelLink,
+} = await useMainMenuLinks()
+const hoverMain = ref(-1)
+const hoverFirst = ref(-1)
+const hoverSecond = ref(-1)
+const hoverThird = ref(-1)
+let timeout: any = null
+
+const emit = defineEmits(['menu:link-click'])
+
+const { $texts } = useNuxtApp()
+
+defineExpose({
+  element: globalMenu,
+})
+
+function setActive(level: menuLevel, index: number) {
+  const hoverStates = {
+    main: hoverMain,
+    first: hoverFirst,
+    second: hoverSecond,
+    third: hoverThird,
+  }
+
+  if (level === 'main') {
+    hoverFirst.value = -1
+    hoverSecond.value = -1
+    hoverThird.value = -1
+  } else if (level === 'first') {
+    hoverSecond.value = -1
+    hoverThird.value = -1
+  } else if (level === 'second') {
+    hoverThird.value = -1
+  }
+
+  const state = hoverStates[level]
+  if (isMobile.value) {
+    state.value = state.value === index ? -1 : index
+  } else {
+    state.value = index
+  }
+}
+
+function onMenuInteraction(level: menuLevel, index: number) {
+  clearTimeout(timeout)
+  timeout = setTimeout(() => {
+    setActive(level, index)
+  }, 100)
+}
+
+function onMouseLeave() {
+  clearTimeout(timeout)
+}
+
+function onNavbarMouseLeave() {
+  hoverMain.value = -1
+  hoverFirst.value = -1
+  hoverSecond.value = -1
+}
+
+function onLinkClick() {
+  emit('menu:link-click')
+}
+</script>
+
+<style lang="postcss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity duration-200 ease-out;
+}
+.fade-enter,
+.fade-leave-active {
+  @apply opacity-0;
+}
+
+.slideDown-enter-active,
+.slideDown-leave-active {
+  transition: max-height 1s ease-in-out;
+}
+
+.slideDown-enter-to,
+.slideDown-leave-from {
+  overflow: hidden;
+  max-height: 400px;
+}
+
+.slideDown-enter-from,
+.slideDown-leave-to {
+  overflow: hidden;
+  max-height: 0;
+}
+</style>

package/components/Section/Header/LanguageDropdown.vue

@@ -0,0 +1,105 @@
+<template>
+  <div v-if="languageLinks.length">
+    <ClientOnly>
+      <div
+        class="group relative z-40 mb-6 flex h-full items-center lg:mb-0 lg:p-0 lg:pl-8"
+        @mouseenter="!isMobile && (langSwitchDropdownOpen = true)"
+        @mouseleave="!isMobile && (langSwitchDropdownOpen = false)"
+        @click="isMobile && (langSwitchDropdownOpen = !langSwitchDropdownOpen)"
+      >
+        <button
+          class="flex items-center gap-1"
+          aria-haspopup="true"
+          :aria-expanded="langSwitchDropdownOpen"
+          aria-controls="language-dropdown"
+        >
+          <span
+            class="font-medium group-hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-250 motion-safe:ease-in-out"
+            :class="{
+              'text-primary-500': langSwitchDropdownOpen,
+            }"
+          >
+            {{ currentLanguage.toUpperCase() }}
+          </span>
+          <SpriteSymbol
+            name="chevron-down"
+            class="size-4 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+            :class="{
+              'rotate-180': langSwitchDropdownOpen,
+            }"
+          />
+        </button>
+        <div
+          v-show="langSwitchDropdownOpen"
+          class="absolute left-0 top-full pt-2 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out lg:left-auto lg:right-0 lg:pt-4"
+        >
+          <ul
+            role="menu"
+            id="language-dropdown"
+            class="border border-gray-100 bg-white"
+          >
+            <li v-for="(lang, i) in languageLinks" :key="`lang_${i}`">
+              <NuxtLink
+                role="menuitem"
+                :to="lang.to"
+                :title="getLanguageName(lang.code)"
+                class="flex items-center px-4 py-3 text-sm font-medium hover:text-primary-500 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+                @click="onLangDropdownLinkClick"
+              >
+                {{ getLanguageName(lang.code) }}
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+        <transition name="fade"> </transition>
+      </div>
+    </ClientOnly>
+  </div>
+</template>
+
+<script lang="ts" setup>
+type LanguageLink = {
+  code: string
+  active: boolean
+  to: string
+}
+
+const emit = defineEmits(['lang-dropdown:change'])
+
+const languages: ComputedRef<LanguageLink[]> = useLanguageLinks()
+const currentLanguage = useCurrentLanguage()
+const { isMobile } = useIsMobile()
+
+const languageLinks = computed(() => {
+  return languages.value.filter((l) => l.code !== currentLanguage.value)
+})
+
+const langSwitchDropdownOpen = ref(false)
+
+const getLanguageName = (code: string): string => {
+  const languageNames: Record<string, string> = {
+    en: 'English',
+    de: 'Deutsch',
+    fr: 'Français',
+    it: 'Italiano',
+  }
+
+  return languageNames[code] || code
+}
+
+const onLangDropdownLinkClick = () => {
+  emit('lang-dropdown:change')
+  langSwitchDropdownOpen.value = false
+}
+</script>
+
+<style lang="postcss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  @apply transition-opacity duration-200 ease-out;
+}
+.fade-enter,
+.fade-leave-active {
+  @apply opacity-0;
+}
+</style>

package/components/Section/Header/MenuIcon.vue

@@ -0,0 +1,171 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="size-6 overflow-visible text-black"
+    aria-hidden
+  >
+    <rect
+      width="22"
+      height="2"
+      rx="2"
+      x="2"
+      y="4"
+      fill="currentColor"
+      stroke-width="0"
+      transform-origin="12.5 5"
+      :class="{
+        'close-icon-top-forwards': isInClosableState,
+        'close-icon-top-backwards': !isInClosableState,
+      }"
+    />
+    <rect
+      width="22"
+      height="2"
+      rx="2"
+      x="2"
+      y="11"
+      fill="currentColor"
+      stroke-width="0"
+      transform-origin="12.5 12"
+      :class="{
+        'close-icon-center-forwards': isInClosableState,
+        'close-icon-center-backwards': !isInClosableState,
+      }"
+    />
+    <rect
+      width="22"
+      height="2"
+      rx="2"
+      x="2"
+      y="18"
+      fill="currentColor"
+      stroke-width="0"
+      transform-origin="12.5 19"
+      :class="{
+        'close-icon-bottom-forwards': isInClosableState,
+        'close-icon-bottom-backwards': !isInClosableState,
+      }"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  isInClosableState: boolean
+}>()
+</script>
+
+<style lang="postcss">
+@keyframes closeIconTop {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(0, 7px) rotate(0deg);
+  }
+  100% {
+    transform: translate(0, 7px) rotate(45deg);
+  }
+}
+
+@keyframes closeIconCenter {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes closeIconBottom {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(0, -7px) rotate(0deg);
+  }
+  100% {
+    transform: translate(0, -7px) rotate(-45deg);
+  }
+}
+
+@keyframes closeIconTopReverse {
+  0% {
+    transform: translate(0, 7px) rotate(45deg);
+  }
+  50% {
+    transform: translate(0, 7px) rotate(0deg);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+
+@keyframes closeIconCenterReverse {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes closeIconBottomReverse {
+  0% {
+    transform: translate(0, -7px) rotate(-45deg);
+  }
+  50% {
+    transform: translate(0, -7px) rotate(0deg);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+
+.close-icon-top-forwards {
+  animation-name: closeIconTop;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+}
+
+.close-icon-top-backwards {
+  transform: translate(0, 0) rotate(0deg);
+  animation-name: closeIconTopReverse;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+}
+
+.close-icon-bottom-forwards {
+  animation-name: closeIconBottom;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+}
+
+.close-icon-bottom-backwards {
+  transform: translate(0, 0) rotate(0deg);
+  animation-name: closeIconBottomReverse;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+}
+
+.close-icon-center-forwards {
+  animation-name: closeIconCenter;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+}
+
+.close-icon-center-backwards {
+  opacity: 1;
+  animation-name: closeIconCenterReverse;
+  animation-fill-mode: forwards;
+  animation-duration: 250ms;
+}
+</style>

package/components/Section/Header/MetaMenu.vue

@@ -0,0 +1,57 @@
+<template>
+  <nav class="mb-8 lg:mb-0 lg:py-0">
+    <ul
+      role="menu"
+      class="flex size-full flex-col flex-wrap justify-end text-base lg:flex-row lg:items-center lg:gap-8 lg:font-medium"
+    >
+      <li
+        v-for="(link, index) in links"
+        :key="`meta_${index}`"
+        role="menuitem"
+        class="group/main relative flex flex-col items-stretch lg:flex-row"
+      >
+        <VuepalLink
+          :to="link.link?.url?.path"
+          class="flex w-full items-center justify-between py-1 group-hover/main:text-primary-500 motion-safe:transition-colors motion-safe:duration-200 lg:size-auto lg:py-0"
+          :class="
+            link.link?.url?.path === currentActiveMetaLink?.link.url?.path
+              ? 'text-primary-500'
+              : 'text-black'
+          "
+        >
+          {{ link.link.label }}
+        </VuepalLink>
+      </li>
+    </ul>
+  </nav>
+  <div v-if="props.links?.length !== 0" class="mb-8 flex gap-8 lg:mb-0 lg:ml-8">
+    <DesignSystemAtomsButton
+      v-for="link in props.links"
+      :key="link.uuid"
+      :label="link?.props?.label"
+      :subline="link?.props?.subline"
+      :title="link?.props?.title"
+      :link="link?.props?.link?.uri?.path"
+      :params="link?.props?.params"
+      :target-blank="link?.props?.targetBlank"
+      :style="link?.props?.buttonStyle"
+      buttonClass="no-underline"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ParagraphIcmsButtonElementFragment } from '#build/graphql-operations'
+
+const { links, currentActiveMetaLink } = await useMetaMenuLinks()
+
+const props = defineProps<{
+  links: Array<ParagraphIcmsButtonElementFragment>
+}>()
+
+const emit = defineEmits(['meta:empty'])
+
+if (links.value?.length === 0) {
+  emit('meta:empty')
+}
+</script>

package/components/Section/Header/SearchLink.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="pr-4 font-medium lg:pr-12"
+    :class="{
+      'sticky top-0': isSticky,
+    }"
+  >
+    <nuxt-link
+      :to="{ name: 'search' }"
+      class="flex h-10 items-center gap-1 px-3 text-primary-500 lg:h-[50px]"
+    >
+      <span class="sr-only lg:not-sr-only">
+        {{ $texts('header.search', 'Suche') }}
+      </span>
+      <SpriteSymbol name="magnifyingglass" class="size-5" />
+    </nuxt-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  isSticky: boolean
+}>()
+
+const { $texts } = useNuxtApp()
+</script>