initiation librodrome

app/components/layout/TheHeader.vue

@@ -0,0 +1,41 @@
+<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>