37 lines
1.0 KiB
Vue

<template>
<header class="sticky top-0 z-50 bg-neutral-200 shadow text-neutral-700">
<AppStripe>
<nav class="mx-auto py-4 flex items-center justify-between">
<!-- your logo / home link -->
<NuxtLink :to="p('/')" class="text-xl font-semibold flex items-center gap-2">
<UIcon name="i-heroicons-home" />
<span class="hidden md:inline">
{{ c.header.home }}
</span>
</NuxtLink>
<!-- nav links -->
<ul class="flex space-x-6">
<li>
<NuxtLink :to="p('apartments')">{{ c.header.apartments }}</NuxtLink>
</li>
<li>
<NuxtLink :to="p('book')">{{ c.header.book }}</NuxtLink>
</li>
<li>
<NuxtLink :to="p('contact')">{{ c.header.contact }}</NuxtLink>
</li>
<LocaleSwitcher/>
<VariantSwitcher/>
</ul>
</nav>
</AppStripe>
</header>
</template>
<script setup lang="ts">
const {p, c} = useContent()
</script>