Merge pull request #114 from aziontech/fix-cls-menunavigationblock

fix: webvitals CLS MenuNavigationBlock.vue
aziontech · Jan 14, 2025 · 6755dfa · 6755dfa
2 parents ce8218d + 4b19c91
commit 6755dfa
Showing 1 changed file with 61 additions and 34 deletions.
diff --git a/src/templates/menunavigationblock/MenuNavigationBlock.vue b/src/templates/menunavigationblock/MenuNavigationBlock.vue
@@ -1,64 +1,91 @@
 <template>
-  <div :class="[{'px-container' : isContainer }]">
-    <Menubar :model="mappedData" class="w-full border-none hidden lg:flex gap-5" :pt="{
-      root: {
-        class: 'surface-ground'
-      },
-      submenu: {
-        class: 'rounded-md w-max max-w-xs'
-      }
-    }">
+  <!-- Desk -->
+  <div class="!min-h-[56px]" :class="[{'px-container' : isContainer }]">
+    <Menubar
+      class="w-full border-none hidden lg:flex gap-5"
+      :model="mappedData"
+      :pt="{
+        root: {
+          class: 'surface-ground'
+        },
+        submenu: {
+          class: 'rounded-md w-max max-w-xs'
+        }
+      }"
+    >
       <template #start>
-        <p class="text-lg font-medium leading-relaxed">{{ menuTitle }}</p>
+        <p class="text-lg font-medium leading-relaxed !min-h-[56px] flex items-center">
+          {{ menuTitle }}
+        </p>
       </template>
+
       <template #item="{ item, hasSubmenu, root }">
         <template v-if="item.url">
-          <a class="flex align-items-center p-3 leading-relaxed cursor-pointer" :href="item.url">
-            <span class="text-sm">{{ item.label }}</span>
+          <a class="flex align-items-center p-3 leading-relaxed cursor-pointer !min-h-[44px]" :href="item.url">
+            <span class="text-sm">
+              {{ item.label }}
+            </span>
           </a>
         </template>
         <template v-else>
-          <a class="flex align-items-center p-3 leading-relaxed cursor-pointer">
-            <span class="text-sm">{{ item.label }}</span>
-            <i v-if="hasSubmenu"
-              :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+          <a class="flex align-items-center p-3 leading-relaxed cursor-pointer !min-h-[44px]">
+            <span class="text-sm">
+              {{ item.label }}
+            </span>
+            <i
+              v-if="hasSubmenu"
+              :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"
+            >
+            </i>
           </a>
         </template>
       </template>
     </Menubar>
   </div>
-  <PanelMenu :model="mobile" class="block lg:hidden" :pt="{
-    root: {
-      class: 'w-full',
-    },
-    headerContent: {
-      class: 'w-full border-none py-1 flex items-center min-h-8 text-sm',
-    },
-    menuContent: {
-      class: 'border-none text-sm',
-    }
-  }">
+
+  <!-- Mobile -->
+  <PanelMenu
+    class="block lg:hidden"
+    :model="mobile"
+    :pt="{
+      root: {
+        class: 'w-full',
+      },
+      headerContent: {
+        class: 'w-full border-none py-1 flex items-center min-h-8 text-sm',
+      },
+      menuContent: {
+        class: 'border-none text-sm',
+      }
+    }"
+  >
     <template #item="{ item }">
       <template v-if="item.url">
-        <a class="flex align-items-center cursor-pointer text-color px-3 py-2 w-full"
-          :href="item.url" target="_self">
-          <span class="ml-2">{{ item.label }}</span>
+        <a
+          class="flex align-items-center cursor-pointer text-color px-3 py-2 w-full"
+          :href="item.url" target="_self"
+        >
+          <span class="ml-2">
+            {{ item.label }}
+          </span>
         </a>
       </template>
       <template v-else>
         <a class="flex align-items-center cursor-pointer text-color px-3 py-2 w-full" target="_self">
-          <span class="ml-2">{{ item.label }}</span>
-          <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
+          <span class="ml-2">
+            {{ item.label }}
+          </span>
+          <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto"></span>
         </a>
       </template>
     </template>
   </PanelMenu>
 </template>
 
 <script setup>
-import Menubar from 'primevue/menubar';
-import PanelMenu from 'primevue/panelmenu';
 import { onBeforeMount, ref } from 'vue'
+import Menubar from 'primevue/menubar'
+import PanelMenu from 'primevue/panelmenu'
 
 const props = defineProps({
   menuTitle: {