✨ feature: Menu bar component updated

src/components/menu/VMenuBar.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Menubar from 'primevue/menubar';
 import type IVMenuBar from './IVMenuBar.type';
-import type { MenubarSlots } from 'primevue/menubar';
-import { computed } from 'vue';
+import styles from '@visua/typography.module.css'
+
 const props = withDefaults(defineProps<IVMenuBar>(), {
   searchbarId: 'searchbar-header',
   serviceTitle: undefined,
@@ -13,26 +13,6 @@ const props = withDefaults(defineProps<IVMenuBar>(), {
   quickLinks: undefined,
   menuLabel: undefined
 })
-
-type VMenuBarSlots = MenubarSlots & {
-  default?: (props: Record<string, unknown>) => unknown
-};
-
-const slots = defineSlots<VMenuBarSlots>();
-
-const menuBarSlotsKeys = [
-  'start',
-  'end',
-  'item',
-  'button',
-  'buttonicon',
-  'submenuicon',
-  'itemicon'
-] as const
-
-const availableSlots = computed(() =>
-  menuBarSlotsKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
-);
 </script>
 
 <template>
@@ -40,14 +20,91 @@ const availableSlots = computed(() =>
     role="banner"
     :model="props.quickLinks"
     :breakpoint="props.breakpoints"
+    class="p-menubar"
   >
-    <template
-      v-for="([name]) in availableSlots"
-      :key="name"
-      v-slot:[name]="slotProps"
+    <template #start>
+      <RouterLink to="/" class="logo-container">
+        <div v-if="$slots.logo" class="logo">
+          <slot name="logo"/>
+        </div>
+        <span
+          v-if="!!props.serviceTitle"
+          :class="[styles['titles-H6-XXS']]"
+          style="color: var(--text-title-grey);"
         >
-      <slot :name="name" v-bind="slotProps" />
+          {{ props.serviceTitle }}
+        </span>
+      </RouterLink>
+    </template>
+    <template #end>
+      <slot name="end"/>
+    </template>
+    <template #item="{ item, props, hasSubmenu }">
+      <component
+        v-if="hasSubmenu || 'label' in item || 'icon' in item"
+        :is="item.to ? 'RouterLink' : item.url ? 'a' : 'div'"
+        :to="item.to"
+        :href="item.url"
+        :target="item.target"
+        :tabindex="0"
+        v-bind="props.action"
+        class="item"
+        :class="[styles['text-body-LG-article-text-Regular']]"
+      >
+        <slot name="itemicon" :item="item" v-if="'icon' in item">
+          <i :class="[item.icon]"></i>
+        </slot>
+        <span v-if="'label' in item" style="width: 100%;">{{ item.label }}</span>
+        <slot name="submenuicon" v-if="hasSubmenu">
+          <i class="ri-arrow-down-s-line"/>
+        </slot>
+      </component>
+    </template>
+    <template #button="{id, toggleCallback}">
+      <slot name="button" :id="id" :toggleCallback="toggleCallback"/>
+    </template>
+    <template #buttonicon>
+      <slot name="buttonicon"/>
     </template>
-    <slot></slot>
   </Menubar>
 </template>
+
+<style lang="css" scoped>
+*{
+  margin: 0px;
+  padding: 0px;
+}
+
+a{
+  color: var(--p-menubar-color);
+  text-decoration: none;
+}
+.logo{
+  display: block;
+  width: 25%;
+  height: auto;
+  padding: 0px;
+  margin: 0px;
+}
+
+.logo-container{
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  gap: var(--p-menubar-gap);
+  align-items: center;
+}
+
+.p-menubar{
+  width: 100%;
+  height: 4.5rem;
+  border-width: 0px 0px var(--border-width) 0px;
+  border-style: solid;
+  border-color: var(--p-menubar-border-color);
+}
+
+.item:hover,
+.item:active{
+  color: var(--menu-active-color);
+}
+</style>