56 lines
No EOL
1.2 KiB
Vue
Executable file
56 lines
No EOL
1.2 KiB
Vue
Executable file
<template>
|
|
<header class="Header">
|
|
<NuxtLink to="/">
|
|
<strong><span>Pro</span>Papier</strong>
|
|
</NuxtLink>
|
|
<label for="burger_nav_toggle">
|
|
<Icon name="solar:hamburger-menu-broken" size="2em" />
|
|
</label>
|
|
<input ref="checkbox" type="checkbox" id="burger_nav_toggle"/>
|
|
<nav class="flex-col">
|
|
<label for="burger_nav_toggle">
|
|
<Icon name="solar:close-circle-broken" />
|
|
</label>
|
|
<ul class="flex-col">
|
|
<li v-for="navPoint in navPoints" :key="navPoint.label">
|
|
<NuxtLink
|
|
:to="navPoint.to"
|
|
active-class="active"
|
|
@click="closeNav()"
|
|
>
|
|
{{ navPoint.label }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type NavPoint = {
|
|
label: string
|
|
to: string
|
|
}
|
|
|
|
const navPoints = useState<NavPoint[]>('nav', () => ([
|
|
{
|
|
label: 'Home',
|
|
to: '/',
|
|
},
|
|
{
|
|
label: 'Übersicht',
|
|
to: '/overview',
|
|
},
|
|
]))
|
|
|
|
const cb = useTemplateRef('checkbox')
|
|
const closeNav = () => { cb.value!.checked = false }
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
header a {
|
|
text-decoration: none;
|
|
color: var(--color-darkest);
|
|
}
|
|
</style> |