htwkalender-pwa/frontend/src/components/MenuBar.vue

<script lang="ts" setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import LocaleSwitcher from "./LocaleSwitcher.vue";
import DarkModeSwitcher from "./DarkModeSwitcher.vue";
const { t } = useI18n({ useScope: "global" });

const items = computed(() => [
  {
    label: t("createCalendar"),
    icon: "pi pi-fw pi-plus",
    route: "/",
  },
  {
    label: t("editCalendar"),
    icon: "pi pi-fw pi-pencil",
    route: "/edit",
  },
  {
    label: t("rooms"),
    icon: "pi pi-fw pi-angle-down",
    info: "rooms",
    items: [
      {
        label: t("roomFinderPage.roomSchedule"),
        icon: "pi pi-fw pi-hourglass",
        route: "/rooms/occupancy",
      },
      {
        label: t("freeRooms.freeRooms"),
        icon: "pi pi-fw pi-calendar",
        route: "/rooms/free",
      },
    ],
  },
  {
    label: t("faq"),
    icon: "pi pi-fw pi-book",
    route: "/faq",
  },
  {
    label: t("imprint"),
    icon: "pi pi-fw pi-id-card",
    route: "/imprint",
  },
  {
    label: t("privacy"),
    icon: "pi pi-fw pi-exclamation-triangle",
    route: "/privacy-policy",
  },
]);
</script>

<template>
  <Menubar :model="items" class="menubar justify-content-between flex-wrap">
    <template #start>
      <router-link v-slot="{ navigate }" :to="`/`" custom>
        <Button severity="secondary" text class="p-0 mx-2" @click="navigate">
          <img width="50" height="50" src="../../public/htwk.svg" alt="Logo" />
        </Button>
      </router-link>
    </template>
    <template #item="{ item, props }">
      <router-link
        v-if="item.route"
        v-slot="{ navigate }"
        :to="item.route"
        custom
      >
        <a
          :class="
            $route.path == item.route
              ? 'flex align-items-center active'
              : 'flex align-items-center'
          "
          v-bind="props.action"
          @click="navigate"
        >
          <span :class="item.icon" />
          <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
        </a>
      </router-link>
      <a
        v-else
        :class="
          $route.path.includes(item.info)
            ? 'flex align-items-center active'
            : 'flex align-items-center'
        "
        v-bind="props.action"
      >
        <span :class="item.icon" />
        <span class="ml-2 p-menuitem-label">{{ item.label }}</span>
      </a>
    </template>
    <template #end>
      <div class="flex align-items-stretch justify-content-center">
        <DarkModeSwitcher></DarkModeSwitcher>
        <LocaleSwitcher></LocaleSwitcher>
      </div>
    </template>
  </Menubar>
</template>

<style scoped>
.menubar {
  background-color: transparent;
  border: none;
}

:deep(.p-submenu-list) {
  border-radius: 6px;
}

:deep(.p-menuitem-link .p-menuitem-label::after) {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s;
}

:deep(.p-menuitem-link.active .p-menuitem-label::after) {
  width: 100%;
}
</style>