ANavMenu.vue

<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"
          :data-testid="navItem.testId"
          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>