wf4/app/components/Burger.vue
webfussel d24115c865 FIX: some fixes for rollout
schooling link, small issues with burger menu
2025-05-28 10:10:39 +02:00

26 lines
No EOL
740 B
Vue

<template>
<div class="Burger" :class="{ open }">
<nav class="z-4" ref="navElement">
<ul>
<li v-for="({label, to, aria, icon}) in navigation" :key="label">
<NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap" @click="close">
<Icon :name="icon" mode="svg" />
{{ label }}
</NuxtLink>
</li>
</ul>
</nav>
</div>
</template>
<script setup lang="ts">
import { navigation } from '../utils/navigation'
const navElement = useTemplateRef('navElement')
const nav = useNavigation()
const close = () => nav.hideNavigation()
const open = computed(() => nav.isNavigationVisible.value)
onClickOutside(navElement, close)
</script>