Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
<template v-for="(collection, index) of nav" :key="index">
<SafeHTML
as="p"
:html="collection.title"
sanitize-preset="strip"
class="tw-text-xs tw-font-bold tw-text-gray-400 -tw-mb-0 tw-mx-6 tw-uppercase"
:class="{ 'tw-mt-6': index > 0 }"
/>
<div class="tw-px-4 tw-py-2 tw-rounded tw-bg-white tw-shadow">
<template v-for="(navItem, navItemIndex) of collection.items" :key="navItemIndex">
<router-link v-if="!navItem.requiresAdmin" :to="navItem.route" class="router-link">
<SafeHTML :html="navItem.title" sanitize-preset="inline-noninteractive" />
</router-link>
</template>
</div>
</template>
</template>
<script setup lang="ts">
import SafeHTML from '@/components/generic/SafeHTML'
import { MenuItemCollection } from '@/components/nav/nav'
defineProps<{
nav: Readonly<MenuItemCollection[]>
}>()
</script>
<style lang="postcss" scoped>
.router-link {
@apply tw-flex tw-flex-1 tw-gap-2 tw-items-center tw-px-2 tw-py-3 tw-rounded tw-text-inherit tw-font-semibold focus:tw-no-underline;
}
.router-link.router-link-exact-active {
@apply tw-text-aura-primary;
}
</style>