visua-vue/src/components/menu/VMenuBar.vue

<script setup lang="ts">
import Menubar from 'primevue/menubar';
import type IVMenuBar from './IVMenuBar.type.js';
import styles from '@visua/typography.module.css'

const props = withDefaults(defineProps<IVMenuBar>(), {
  searchbarId: 'searchbar-header',
  serviceTitle: undefined,
  serviceDescription: undefined,
  logo: false,
  logoText: undefined,
  breakpoints: '960px',
  quickLinks: undefined,
  menuLabel: undefined
})
</script>

<template>
  <Menubar
    role="banner"
    :model="props.quickLinks"
    :breakpoint="props.breakpoints"
    class="p-menubar"
  >
    <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);"
        >
          {{ 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>
  </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>