HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-07-25 13:59:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#5 added datetime input for search and fixed nav bar

Browse Source
This commit is contained in:
Elmar Kresse
2024-01-24 18:34:40 +01:00
parent c90577e6e5
commit 82899a6f08
12 changed files with 479 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/components/MenuBar.vue
View File

@@ -26,7 +26,7 @@ const items = computed(() => [
route: "/rooms",
},
{
label: t("roomFinderPage.freeRooms"),
label: t("freeRooms.freeRooms"),
icon: "pi pi-fw pi-calendar",
route: "/rooms/free",
},
@@ -59,31 +59,58 @@ const items = computed(() => [
</Button>
</router-link>
</template>
<template #item="{ item }">
<template #item="{ item, props, root }">
<router-link
v-if="item.route"
v-slot="{ navigate }"
:to="item.route"
custom
>
<Button
:label="String(item.label)"
:icon="item.icon"
text
severity="secondary"
:class="item.route === $route.path ? 'active' : ''"
<a
:class="
item.route === $route.path
? '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>
<Badge
v-if="item.badge"
:class="{ 'ml-auto': !root, 'ml-2': root }"
:value="item.badge"
/>
<span
v-if="item.shortcut"
class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1"
>{{ item.shortcut }}</span
>
</a>
</router-link>
<Button
<a
v-else
:label="String(item.label)"
:icon="item.icon"
text
severity="secondary"
@click="item.url"
:class="
item.route === $route.path
? 'flex align-items-center active'
: 'flex align-items-center'
"
v-bind="props.action"
>
</Button>
<span :class="item.icon" />
<span class="ml-2 p-menuitem-label">{{ item.label }}</span>
<Badge
v-if="item.badge"
:class="{ 'ml-auto': !root, 'ml-2': root }"
:value="item.badge"
/>
<span
v-if="item.shortcut"
class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1"
>{{ item.shortcut }}</span
>
</a>
</template>
<template #end>
<div class="flex align-items-stretch justify-content-center">
@@ -104,7 +131,7 @@ const items = computed(() => [
border-radius: 6px;
}
:deep(.p-button .p-button-label::after) {
:deep(.p-menuitem-link .p-menuitem-label::after) {
content: "";
display: block;
width: 0;
@@ -113,7 +140,7 @@ const items = computed(() => [
transition: width 0.3s;
}
:deep(.p-button.active .p-button-label::after) {
:deep(.p-menuitem-link.active .p-menuitem-label::after) {
width: 100%;
}
</style>