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("roomFinder"),
    icon: "pi pi-fw pi-calendar",
    route: `rooms`,
  },
  {
    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"
            class="w-full"
            src="../../public/htwk.svg"
            alt="Logo"
          />
        </Button>
      </router-link>
    </template>
    <template #item="{ item }">
      <router-link v-slot="{ navigate }" :to="item.route" custom>
        <Button
          :label="String(item.label)"
          :icon="item.icon"
          text
          severity="secondary"
          @click="navigate"
        />
      </router-link>
    </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;
}
</style>