42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<template>
|
|
<header class="sticky top-0 z-40 border-b border-white/8 bg-surface-bg/80 backdrop-blur-xl">
|
|
<div class="container-content flex h-[var(--header-height)] items-center justify-between px-4">
|
|
<!-- Logo -->
|
|
<NuxtLink to="/" class="flex items-center gap-2 font-display text-lg font-bold tracking-tight">
|
|
<div class="i-lucide-book-open h-6 w-6 text-primary" />
|
|
<span class="text-gradient">{{ site?.identity.name }}</span>
|
|
</NuxtLink>
|
|
|
|
<!-- Desktop navigation -->
|
|
<nav class="hidden md:flex items-center gap-1" aria-label="Navigation principale">
|
|
<NuxtLink
|
|
v-for="item in site?.navigation"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="btn-ghost text-sm"
|
|
active-class="text-white! bg-white/5"
|
|
>
|
|
{{ item.label }}
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button
|
|
class="btn-ghost md:hidden !p-2"
|
|
aria-label="Menu"
|
|
@click="isMobileMenuOpen = true"
|
|
>
|
|
<div class="i-lucide-menu h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile menu -->
|
|
<LayoutNavMobile v-model:open="isMobileMenuOpen" :nav="site?.navigation ?? []" />
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: site } = await useSiteContent()
|
|
const isMobileMenuOpen = ref(false)
|
|
</script>
|