ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update mobile subnavigation to indicate the active item

This commit is contained in:
Ramon Wenger 2024-10-26 20:57:48 +02:00
parent 6c6bbb9e22
commit 0c1a2b3151
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/header/SubNavItem.vue
View File

@ -18,7 +18,13 @@ const isExternalLink = computed(() => {
</script>
<template>
<a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
<a
v-if="isExternalLink"
class="flex items-center gap-2"
v-bind="$attrs"
:href="to"
target="_blank"
>
<slot />
<it-icon-external-link />
</a>

44
client/src/pages/competence/CompetenceParentPage.vue
View File

@ -7,10 +7,10 @@ import {
COMPETENCES_ROUTE,
SELF_EVALUATION_ROUTE,
} from "@/router/names";
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/vue";
import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
import { useTranslation } from "i18next-vue";
import * as log from "loglevel";
import { computed, onMounted } from "vue";
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
log.debug("CompetenceParentPage created");
@ -64,31 +64,38 @@ const items = [
{ id: 3, name: t("a.Handlungskompetenzen"), route: competencesRoute },
{
id: 3,
id: 4,
name: "MS Teams",
iconName: "it-icon-external-link",
route: "https://iterativ.ch",
},
{
id: 3,
id: 5,
name: "Vorschau Teilnehmer",
iconName: "it-icon-external-link",
route: "https://iterativ.ch",
},
// { id: 4, name: "Vorschau Teilnehmer", iconName: "it-icon-external-link" },
];
const currentRouteName = computed(() => {
return items.find((item) => isCurrentRoute(item.route))?.name || "";
});
const open = ref<boolean>(false);
const currentRoute = ref(items.find((item) => isCurrentRoute(item.route)));
const selectRoute = (current) => {
// we use this to mimic VueRouter's active flag
open.value = false;
currentRoute.value = current;
};
</script>
<template>
<div class="bg-gray-200">
<nav class="border-b bg-white px-4 lg:px-8">
<Listbox as="div">
<div class="relative w-full">
<ListboxButton
<Listbox as="div" :model-value="currentRoute" by="id">
<div class="relative w-full py-2 lg:hidden">
<button
class="relative flex w-full cursor-default flex-row items-center border bg-white py-3 pl-5 pr-10 text-left"
@click="open = !open"
>
{{ currentRouteName }}
<span
@ -96,15 +103,28 @@ const currentRouteName = computed(() => {
>
<it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
</span>
</ListboxButton>
</button>
<ListboxOptions
class="absolute top-14 flex w-full cursor-default flex-col rounded-xl border-0 bg-white text-left shadow-lg"
v-if="open"
class="absolute top-14 z-50 flex w-full cursor-default flex-col rounded-xl border-0 bg-white text-left shadow-lg"
static
>
<ListboxOption v-for="item in items" :key="item.id">
<ListboxOption
v-for="item in items"
:key="item.id"
v-slot="{ selected }"
:value="item"
class="relative w-full border-b py-3 pl-10 pr-10 last:border-b-0"
>
<SubNavItem
class="flex w-full items-center gap-2 border-b py-3 pl-5 pr-10 last:border-b-0"
:to="item.route"
class="flex items-center gap-2"
@click="selectRoute(item)"
>
<it-icon-check
v-if="selected"
class="absolute left-2 top-1/2 w-8 -translate-y-1/2"
/>
{{ item.name }}
</SubNavItem>
</ListboxOption>