@iqual/nuxt-icms 1.2.3 → 1.3.1

package/components/Search/Facets/fragment.graphql

@@ -1,11 +1,13 @@
 query layoutOverviewFacetsSearch(
   $facets: [String!],
   $filter: SearchApiQueryFilterInput,
+  $keys: String
 ) {
 	searchApiQuery(
     indexId: "content_search",
-    facets: $facets
-    filter: $filter
+    facets: $facets,
+    filter: $filter,
+    keys: $keys
   ) {
     count
     facets {
@@ -23,18 +25,35 @@ query layoutOverviewFacetsSearch(
 query layoutOverviewResultsSearch(
   $filter: SearchApiQueryFilterInput,
   $limit: Int,
-  $offset: Int
+  $offset: Int,
+  $keys: String
+  $facets: [String!],
 ) {
 	searchApiQuery(
     indexId: "content_search",
     filter: $filter
+    facets: $facets,
     limit: $limit
     offset: $offset
+    keys: $keys
   ) {
     count
     results {
       bundle: __typename
       ...entityTeaser
     }
+    facets {
+      field
+      label
+      filter {
+        id
+        label
+      }
+      count
+      results {
+        bundle: __typename
+        ...entityTeaser
+      }
+    }
   }
 }

package/components/Search/Input/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <label for="searchterm" class="sr-only">
+    {{ $texts('search.search_field_label', 'Suchbegriff') }}
+  </label>
+  <div v-click-away="clickAway" class="relative flex" role="search">
+    <SpriteSymbol
+      name="magnifyingglass"
+      class="absolute left-4 top-1/2 size-5 -translate-y-1/2 text-primary"
+    />
+    <input
+      id="searchInput"
+      ref="input"
+      v-model="searchTermInternal"
+      type="search"
+      autocomplete="off"
+      name="searchterm"
+      :class="inputClass"
+      spellcheck="false"
+      role="searchbox"
+      aria-owns="searchterm-suggestions"
+      aria-label="Search input"
+      :placeholder="
+        $texts('search.search_field_placeholder', 'Suchbegriff eingeben')
+      "
+      @focus="isFocused = true"
+      @search="updateSearchTerm"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    inputClass?: string
+  }>(),
+  {
+    inputClass: 'rounded-lg bg-gray-50 py-3 pr-3 pl-12',
+  },
+)
+
+const searchTermInternal = ref('')
+const isFocused = ref(false)
+const input = ref<HTMLInputElement | null>(null)
+const { $texts } = useNuxtApp()
+
+const emit = defineEmits(['update:modelValue'])
+
+watch(
+  () => props.modelValue,
+  function (newValue) {
+    searchTermInternal.value = newValue || ''
+  },
+)
+
+function updateSearchTerm() {
+  emit('update:modelValue', searchTermInternal.value)
+}
+
+function clickAway() {
+  isFocused.value = false
+}
+
+onMounted(() => {
+  searchTermInternal.value = props.modelValue || ''
+})
+</script>

package/components/Section/Footer/index.vue

@@ -89,7 +89,7 @@
               </NuxtLink>
             </template>
           </div>
-          <div class="flex items-center">
+          <div v-if="footerMetaMenuLinks" class="flex items-center">
             <ul class="flex flex-col gap-4 md:flex-row md:gap-6">
               <li v-for="(link, index) in footerMetaMenuLinks" :key="index">
                 <NuxtLink
@@ -112,7 +112,7 @@
 import type { NuxtSvgSpriteSymbol } from '#nuxt-svg-icon-sprite/runtime'
 
 const { menuItems: footerMenuLinks } = await useMenu('footerMenu')
-const { menuItems: footerMetaMenuLinks } = await useMenu('footerMenu')
+const { menuItems: footerMetaMenuLinks } = await useMenu('footerMetaMenu')
 const {
   companyLogo,
   companyName,

package/components/Section/Header/GlobalMenu.vue

@@ -1,25 +1,25 @@
 <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"
+    class="border-b-1 z-30 mb-8 border-b-gray-100 py-8 2xl:mb-0 2xl:h-full 2xl:border-0 2xl:py-0 2xl: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"
+      class="flex flex-col flex-wrap justify-end text-base 2xl:h-full 2xl:flex-row 2xl:items-center 2xl:gap-8 2xl:border-0 2xl:font-medium"
     >
       <li
         v-for="(link, mainIndex) in menuItems"
         :key="`global_${mainIndex}`"
         role="menuitem"
-        class="group/main relative flex flex-col items-stretch lg:h-full lg:flex-row"
+        class="group/main relative flex flex-col items-stretch 2xl:h-full 2xl:flex-row"
       >
         <VuepalLink
           :to="link?.href"
           :aria-controls="'firstLevel-' + mainIndex"
           :aria-expanded="hoverMain === mainIndex"
           :aria-haspopup="!!link.children?.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="group-hover/main:text-primary-500 flex w-full items-center justify-between whitespace-nowrap motion-safe:transition-colors motion-safe:duration-200 2xl:size-auto 2xl:py-0"
           :class="
             link?.href === menuItemActive?.href
               ? 'text-primary-500'
@@ -31,7 +31,7 @@
         >
           {{ link.label }}
           <div
-            class="grid size-10 place-content-center lg:size-auto"
+            class="grid size-10 place-content-center 2xl:size-auto"
             @click.prevent.stop="
               isMobile && onMenuInteraction('main', mainIndex)
             "
@@ -45,10 +45,10 @@
                   : undefined
               "
               :aria-hidden="!isMobile"
-              class="size-5 cursor-pointer text-black transition-transform duration-300 lg:ml-2"
+              class="size-5 cursor-pointer text-black transition-transform duration-300 2xl:ml-2"
               :class="{
                 'rotate-180': isMobile ? hoverMain === mainIndex : false,
-                'lg:rotate-180': !isMobile && hoverMain === mainIndex,
+                '2xl:rotate-180': !isMobile && hoverMain === mainIndex,
               }"
             />
           </div>
@@ -59,9 +59,9 @@
           <div
             v-show="link.children?.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"
+            class="w-max min-w-full 2xl:absolute 2xl:left-0 2xl:top-full 2xl:border 2xl:border-gray-100 2xl:bg-white 2xl:text-sm"
           >
-            <ul role="menu" class="ml-4 lg:ml-0">
+            <ul role="menu" class="ml-4 2xl:ml-0">
               <li
                 v-for="(firstLevelLink, firstLevelIndex) in link.children"
                 :key="`firstLevel_${firstLevelIndex}`"
@@ -74,10 +74,9 @@
                   :aria-controls="'secondLevel-' + firstLevelIndex"
                   :aria-expanded="hoverFirst === firstLevelIndex"
                   :aria-haspopup="!!firstLevelLink?.children?.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="group-hover/first:text-primary-500 flex w-full items-center justify-between whitespace-nowrap no-underline motion-safe:transition-colors motion-safe:duration-200 2xl:px-4 2xl:py-3"
                   :class="
-                    firstLevelLink?.href ===
-                    menuItemActiveLevel1?.href
+                    firstLevelLink?.href === menuItemActiveLevel1?.href
                       ? 'text-primary-500'
                       : 'text-black'
                   "
@@ -89,7 +88,7 @@
                 >
                   {{ firstLevelLink.label }}
                   <div
-                    class="grid size-10 place-content-center lg:size-auto"
+                    class="grid size-10 place-content-center 2xl:size-auto"
                     @click.prevent.stop="
                       isMobile && onMenuInteraction('first', firstLevelIndex)
                     "
@@ -103,7 +102,7 @@
                           : 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="size-5 cursor-pointer text-black transition-transform duration-300 2xl:ml-2 2xl:size-4 2xl:-rotate-90"
                       :class="{
                         'rotate-180': isMobile
                           ? hoverFirst === firstLevelIndex
@@ -121,9 +120,9 @@
                       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"
+                    class="min-w-full 2xl:absolute 2xl:-top-px 2xl:left-full 2xl:border 2xl:border-gray-100 2xl:bg-white 2xl:text-sm"
                   >
-                    <ul role="menu" class="ml-4 lg:ml-0">
+                    <ul role="menu" class="ml-4 2xl:ml-0">
                       <li
                         v-for="(
                           secondLevelLink, secondLevelIndex
@@ -137,10 +136,9 @@
                           :aria-controls="'thirdLevel-' + secondLevelIndex"
                           :aria-expanded="hoverSecond === secondLevelIndex"
                           :aria-haspopup="!!secondLevelLink?.children?.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="group-hover/second:text-primary-500 flex w-full items-center justify-between whitespace-nowrap no-underline motion-safe:transition-colors motion-safe:duration-200 2xl:px-4 2xl:py-3"
                           :class="
-                            secondLevelLink?.href ===
-                            menuItemActiveLevel2?.href
+                            secondLevelLink?.href === menuItemActiveLevel2?.href
                               ? 'text-primary-500'
                               : 'text-black'
                           "
@@ -153,7 +151,7 @@
                         >
                           {{ secondLevelLink.label }}
                           <div
-                            class="grid size-10 place-content-center lg:size-auto"
+                            class="grid size-10 place-content-center 2xl:size-auto"
                             @click.prevent.stop="
                               isMobile &&
                               onMenuInteraction('first', firstLevelIndex)
@@ -171,7 +169,7 @@
                                   : 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="size-5 cursor-pointer text-black transition-transform duration-300 2xl:ml-2 2xl:size-4 2xl:-rotate-90"
                               :class="{
                                 'rotate-180': isMobile
                                   ? hoverSecond === secondLevelIndex
@@ -189,9 +187,9 @@
                               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"
+                            class="min-w-full 2xl:absolute 2xl:-top-px 2xl:left-full 2xl:border 2xl:border-gray-100 2xl:bg-white 2xl:text-sm"
                           >
-                            <ul role="menu" class="ml-4 lg:ml-0">
+                            <ul role="menu" class="ml-4 2xl:ml-0">
                               <li
                                 v-for="(
                                   thirdLevelLink, thirdLevelIndex
@@ -202,7 +200,7 @@
                               >
                                 <VuepalLink
                                   :to="thirdLevelLink.href"
-                                  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="group-hover/third:text-primary-500 flex h-10 w-full items-center whitespace-nowrap no-underline motion-safe:transition-colors motion-safe:duration-200 2xl:h-auto 2xl:px-4 2xl:py-3"
                                   :class="
                                     thirdLevelLink?.href ===
                                     menuTiemActiveLevel3?.href

package/components/Section/Header/LanguageDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <ClientOnly>
     <div
-      class="group relative z-40 mb-6 flex h-full items-center lg:mb-0 lg:p-0 lg:pl-8"
+      class="group relative z-40 mb-6 flex h-full items-center 2xl:mb-0 2xl:p-0 2xl:pl-8"
       @mouseenter="!isMobile && (langSwitchDropdownOpen = true)"
       @mouseleave="!isMobile && (langSwitchDropdownOpen = false)"
       @click="isMobile && (langSwitchDropdownOpen = !langSwitchDropdownOpen)"
@@ -13,7 +13,7 @@
         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="group-hover:text-primary-500 motion-safe:duration-250 font-medium motion-safe:transition-colors motion-safe:ease-in-out"
           :class="{
             'text-primary-500': langSwitchDropdownOpen,
           }"
@@ -22,7 +22,7 @@
         </span>
         <SpriteSymbol
           name="chevron-down"
-          class="size-4 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+          class="motion-safe:duration-250 size-4 motion-safe:transition-all motion-safe:ease-in-out"
           :class="{
             'rotate-180': langSwitchDropdownOpen,
           }"
@@ -30,7 +30,7 @@
       </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"
+        class="motion-safe:duration-250 absolute left-0 top-full pt-2 motion-safe:transition-all motion-safe:ease-in-out 2xl:left-auto 2xl:right-0 2xl:pt-4"
       >
         <ul
           role="menu"
@@ -43,14 +43,14 @@
               role="menuitem"
               :to="lang.to"
               :title="lang.label"
-              class="flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap hover:text-primary-500 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+              class="hover:text-primary-500 motion-safe:duration-250 flex items-center whitespace-nowrap px-4 py-3 text-sm font-medium motion-safe:transition-all motion-safe:ease-in-out"
               @click="onLangDropdownLinkClick"
             >
               {{ lang.label }}
             </NuxtLink>
             <span
               v-else
-              class="flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap text-gray-100"
+              class="flex items-center whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-100"
             >
               {{ lang.label }}
             </span>
@@ -60,11 +60,9 @@
       <transition name="fade"> </transition>
     </div>
   </ClientOnly>
-
 </template>
 
 <script lang="ts" setup>
-
 const links = useLanguageLinks()
 
 const emit = defineEmits(['lang-dropdown:change'])

package/components/Section/Header/MetaMenu.vue

@@ -1,20 +1,22 @@
 <template>
-  <nav class="mb-8 lg:mb-0 lg:py-0">
+  <nav class="mb-8 2xl:mb-0 2xl: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"
+      class="flex size-full flex-col flex-wrap justify-end text-base 2xl:flex-row 2xl:items-center 2xl:gap-8 2xl:font-medium"
     >
       <li
         v-for="(menuItem, index) in menuItems"
         :key="`meta_${index}`"
         role="menuitem"
-        class="group/main relative flex flex-col items-stretch lg:flex-row"
+        class="group/main relative flex flex-col items-stretch 2xl:flex-row"
       >
         <VuepalLink
           :to="menuItem?.href"
-          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="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'
+            menuItem?.href === menuItemActive?.href
+              ? 'text-primary-500'
+              : 'text-black'
           "
           @click="onLangDropdownLinkClick"
         >
@@ -23,7 +25,10 @@
       </li>
     </ul>
   </nav>
-  <div v-if="props.links?.length !== 0" class="mb-8 flex gap-8 lg:mb-0 lg:ml-8">
+  <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"

package/components/Section/Header/index.vue

@@ -3,7 +3,7 @@
     ref="container"
     class="z-30 flex flex-col bg-white"
     :class="{
-      'max-h-[70px] !overflow-y-hidden lg:max-h-screen lg:!overflow-y-visible':
+      'max-h-[70px] !overflow-y-hidden 2xl:max-h-screen 2xl:!overflow-y-visible':
         !isMenuOpen,
       'max-h-screen overflow-y-auto': isMenuOpen,
       'fixed size-full max-h-dvh': isGlobalSticky,
@@ -13,7 +13,7 @@
   >
     <!-- Meta menu full-width container -->
     <!-- Hidden on mobile -->
-    <div class="hidden border-b-1 border-b-gray-100 lg:block">
+    <div class="border-b-1 hidden border-b-gray-100 2xl:block">
       <!-- Meta menu container -->
       <DesignSystemAtomsGridRow
         :class="'w-full max-w-full 2xl:max-w-screen-2xl'"
@@ -28,7 +28,7 @@
 
             <!-- Desktop Language dropdown -->
             <SectionHeaderLanguageDropdown
-              class="hidden h-full lg:block"
+              class="hidden h-full 2xl:block"
               @lang-dropdown:change="closeMenu"
             />
           </div>
@@ -37,32 +37,28 @@
     </div>
 
     <!-- Main menu full-width container -->
-    <div class="h-[70px] shrink-0 border-b-1 border-b-gray-100 lg:h-[110px]">
+    <div class="border-b-1 h-[70px] shrink-0 border-b-gray-100 2xl:h-[110px]">
       <!-- Main menu container -->
       <div
-        class="flex h-full max-w-full items-center justify-between lg:justify-start"
+        class="flex h-full max-w-full items-center justify-between 2xl:justify-start"
       >
         <DesignSystemAtomsGridRow
           :class="'w-full max-w-full 2xl:max-w-screen-2xl'"
         >
           <div class="col-span-12 flex flex-nowrap justify-between">
             <!-- Logo -->
-            <NuxtLink
-              :to="`/${currentLanguage}`"
-              :title="companyName"
-              prefetch
-            >
+            <NuxtLink :to="`/${currentLanguage}`" :title="companyName" prefetch>
               <Media
                 v-if="companyLogo"
                 :media="companyLogo"
-                mediaClass="h-10 lg:h-16"
+                mediaClass="h-10 2xl:h-16"
               />
             </NuxtLink>
 
             <!-- Desktop Main navigation menu -->
             <!-- Hidden on mobile -->
             <SectionHeaderGlobalMenu
-              class="ml-auto hidden lg:block"
+              class="ml-auto hidden 2xl:block"
               @menu:link-click="closeMenu"
             />
 
@@ -70,7 +66,7 @@
             <!-- Hidden on mobile -->
             <div
               v-if="contactButtons?.length"
-              class="ml-8 hidden items-center justify-center gap-8 lg:flex"
+              class="ml-8 hidden items-center justify-center gap-8 2xl:flex"
             >
               <DesignSystemAtomsButton
                 v-for="(contactButton, key) in contactButtons"
@@ -88,14 +84,14 @@
             <!-- Hamburger menu -->
             <!-- Hidden on desktop -->
             <button
-              class="flex items-center gap-3 leading-none lg:hidden"
+              class="flex items-center gap-3 leading-none 2xl:hidden"
               aria-label="Hamburger Menu"
               @click="toggleNav"
             >
               <span
                 class="h-auto leading-none opacity-100"
                 :class="{
-                  'opacity-0 transition-all duration-250 ease-in-out':
+                  'duration-250 opacity-0 transition-all ease-in-out':
                     isMenuOpen,
                 }"
               />
@@ -109,12 +105,15 @@
     <!-- Mobile Main/Meta menu container -->
     <!-- Hidden on desktop -->
     <!-- Initially hidden by overflow when menu closed -->
-    <div class="container max-w-full lg:hidden">
+    <div class="container w-full max-w-full 2xl:hidden">
       <!-- Mobile Main navigation menu -->
       <SectionHeaderGlobalMenu @menu:link-click="closeMenu" />
 
       <!-- Mobile Language dropdown -->
-      <SectionHeaderLanguageSwitcher @lang-dropdown:change="closeMenu" />
+      <SectionHeaderLanguageSwitcher
+        @lang-dropdown:change="closeMenu"
+        class="mb-6"
+      />
 
       <!-- Mobile Meta menu -->
       <SectionHeaderMetaMenu
@@ -123,7 +122,7 @@
       />
 
       <!-- Mobile Contact button -->
-      <div v-if="contactButtons?.length" class="flex gap-8 lg:ml-8">
+      <div v-if="contactButtons?.length" class="flex gap-8 2xl:ml-8">
         <DesignSystemAtomsButton
           v-for="(contactButton, key) in contactButtons"
           :key="key"
@@ -141,8 +140,8 @@
 </template>
 
 <script lang="ts" setup>
-
-const { companyLogo, companyName, contactButtons, metaLinks } = await useGlobalConfig()
+const { companyLogo, companyName, contactButtons, metaLinks } =
+  await useGlobalConfig()
 
 const container = ref<HTMLElement | null>(null)
 const metaRef = useTemplateRef('metaRef')
@@ -210,7 +209,7 @@ function hideMeta() {
 }
 
 watch(viewport.breakpoint, (newValue: string) => {
-  if (newValue === 'md' || newValue === 'lg' || newValue === 'xl') {
+  if (newValue === '2xl') {
     isMenuOpen.value = false
   }
 })

package/composables/useImageSources.ts

@@ -168,7 +168,8 @@ export function useImageSources(options: UseImageSourcesOptions) {
             width: variant._cWidth ? variant._cWidth : undefined,
             height: variant._cHeight ? variant._cHeight : undefined,
             fit: 'cover',
-            format: 'webp'
+            format: 'webp',
+            gravity: mediaRef.value?.focalPoint?.focalPoint ? `${mediaRef.value?.focalPoint?.focalPoint?.x}x${mediaRef.value?.focalPoint?.focalPoint?.y}` : 'auto'
           }),
         })
 

package/composables/useIsMobile.ts

@@ -1,13 +1,9 @@
 export function useIsMobile() {
   const viewport = useViewport()
-  const isMobile = ref(viewport.isLessThan('lg'))
+  const isMobile = ref(viewport.isLessThan('2xl'))
 
   watch(viewport.breakpoint, (newValue: string) => {
-    isMobile.value =
-      newValue === 'md' ||
-      newValue === 'sm' ||
-      newValue === 'xs' ||
-      newValue === 'ss'
+    isMobile.value = newValue !== '2xl'
   })
 
   return { isMobile }

package/error.vue

@@ -3,7 +3,7 @@
     <ClientOnly>
       <div
         v-if="drupalUser.accessToolbar && !isEditing"
-        class="hidden border-b border-b-gray-100 bg-white lg:block"
+        class="hidden border-b border-b-gray-100 bg-white 2xl:block"
       >
         <VuepalAdminToolbar :key="language" />
         <div class="flex">
@@ -22,7 +22,7 @@ const route = useRoute()
 const drupalUser = useDrupalUser()
 const language = useCurrentLanguage()
 
-import { onMounted } from 'vue';
+import { onMounted } from 'vue'
 
 const isEditing = computed(
   () =>
@@ -35,5 +35,4 @@ useHead({
     lang: language.value,
   },
 })
-
-</script>
+</script>

package/layouts/default.vue

@@ -51,14 +51,14 @@ function menuOpen() {
 }
 
 function menuCloseStart() {
-  if (viewport.isLessThan('md')) {
+  if (viewport.isLessThan('2xl')) {
     isMenuOpen.value = false
     hasMenuFinishedClosing.value = false
   }
 }
 
 function menuCloseFinish() {
-  if (viewport.isLessThan('md')) {
+  if (viewport.isLessThan('2xl')) {
     window.document.body.classList.remove('overflow-y-hidden')
     hasMenuFinishedClosing.value = true
   }

package/layouts/error.vue

@@ -81,14 +81,14 @@ function menuOpen() {
 }
 
 function menuCloseStart() {
-  if (viewport.isLessThan('md')) {
+  if (viewport.isLessThan('2xl')) {
     isMenuOpen.value = false
     hasMenuFinishedClosing.value = false
   }
 }
 
 function menuCloseFinish() {
-  if (viewport.isLessThan('md')) {
+  if (viewport.isLessThan('2xl')) {
     window.document.body.classList.remove('overflow-y-hidden')
     hasMenuFinishedClosing.value = true
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "ICMS Base",
   "type": "module",
   "private": false,