Files
htwkalender-pwa/frontend/src/components/MenuBar.vue
2023-12-03 22:32:09 +01:00

75 lines
1.5 KiB
Vue

<script lang="ts" setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import LocaleSwitcher from "./LocaleSwitcher.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">
<template #start>
<img
width="35"
height="40"
src="../../public/htwk.svg"
alt="Logo"
class="h-10 w-10 mr-3"
/>
</template>
<template #item="{ item }">
<router-link v-slot="{ navigate }" :to="item.route" custom>
<Button
:label="String(item.label)"
:icon="item.icon"
severity="secondary"
text
@click="navigate"
/>
</router-link>
</template>
<template #end>
<LocaleSwitcher></LocaleSwitcher>
</template>
</Menubar>
</template>
<style scoped>
.menubar {
background-color: transparent;
border: none;
}
</style>