117 lines
3.7 KiB
Vue
117 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import SubNavItem from "@/components/header/SubNavItem.vue";
|
|
import { isExternalLink } from "@/utils/navigation";
|
|
import { Listbox, ListboxOption, ListboxOptions } from "@headlessui/vue";
|
|
import { computed, ref } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
const router = useRouter();
|
|
|
|
export interface EntryRoute {
|
|
name: string;
|
|
}
|
|
|
|
export type EntryOrExternalRoute = EntryRoute | string;
|
|
|
|
export interface SubNavEntry {
|
|
id: number;
|
|
name: string;
|
|
route: EntryOrExternalRoute;
|
|
dataCy?: string;
|
|
}
|
|
|
|
export interface Props {
|
|
items: SubNavEntry[];
|
|
}
|
|
const props = defineProps<Props>();
|
|
|
|
const isCurrentRoute = (route: { name: string } | string) => {
|
|
return typeof route !== "string" && route?.name === router.currentRoute.value.name;
|
|
};
|
|
const currentRouteName = computed(() => {
|
|
return props.items.find((item) => isCurrentRoute(item.route))?.name || "";
|
|
});
|
|
const open = ref<boolean>(false);
|
|
const currentRoute = ref(props.items.find((item) => isCurrentRoute(item.route)));
|
|
const selectRoute = (current: SubNavEntry) => {
|
|
// we use this to mimic VueRouter's active flag
|
|
open.value = false;
|
|
currentRoute.value = current;
|
|
};
|
|
|
|
const internalLinks = computed(() => {
|
|
return props.items.filter((i) => !isExternalLink(i.route));
|
|
});
|
|
const externalLinks = computed(() => {
|
|
return props.items.filter((i) => isExternalLink(i.route));
|
|
});
|
|
</script>
|
|
<template>
|
|
<nav class="border-b bg-white px-4 lg:px-8">
|
|
<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
|
|
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
|
|
>
|
|
<it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
</button>
|
|
<ListboxOptions
|
|
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"
|
|
v-slot="{ selected }"
|
|
:value="item"
|
|
class="relative w-full border-b py-3 pl-10 pr-10 last:border-b-0"
|
|
>
|
|
<SubNavItem
|
|
: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>
|
|
</ListboxOptions>
|
|
</div>
|
|
</Listbox>
|
|
<div class="center hidden items-end justify-between lg:flex">
|
|
<ul class="flex flex-row gap-10">
|
|
<li
|
|
v-for="item in internalLinks"
|
|
:key="item.id"
|
|
class="border-t-2 border-t-transparent"
|
|
:class="{ 'border-b-2 border-b-blue-900': isCurrentRoute(item.route) }"
|
|
>
|
|
<SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
|
|
{{ item.name }}
|
|
</SubNavItem>
|
|
</li>
|
|
</ul>
|
|
<ul class="flex flex-row gap-10">
|
|
<li
|
|
v-for="item in externalLinks"
|
|
:key="item.id"
|
|
class="border-b-2 border-t-2 border-b-transparent border-t-transparent"
|
|
>
|
|
<SubNavItem :data-cy="item.dataCy" :to="item.route" class="block py-3">
|
|
{{ item.name }}
|
|
</SubNavItem>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</template>
|