41 lines
No EOL
944 B
Vue
41 lines
No EOL
944 B
Vue
<template>
|
|
<section class="Navigation" :class="{ open }">
|
|
<nav>
|
|
<PpButton class="round text" @click="close()">
|
|
<Icon name="uil:times" mode="svg" />
|
|
</PpButton>
|
|
<ul class="flex-col">
|
|
<li v-for="page in pages">
|
|
<NuxtLink :to="page.route" @click="close()" active-class="active">
|
|
<Icon class="icon" :name="`uil:${page.icon}`" mode="svg" />
|
|
<span>{{ page.label }}</span>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const nav = useNavigation()
|
|
const close = () => nav.hideNavigation()
|
|
const open = computed(() => nav.isNavigationVisible.value)
|
|
|
|
const pages = [
|
|
{
|
|
label: 'Home',
|
|
icon: 'home',
|
|
route: '/'
|
|
},
|
|
{
|
|
label: 'Schnellrechner',
|
|
icon: 'calculator',
|
|
route: '/rechner'
|
|
},
|
|
// {
|
|
// label: 'Über uns',
|
|
// icon: 'users-alt',
|
|
// route: '/about-us'
|
|
// }
|
|
]
|
|
</script> |