31 lines
1.5 KiB
Vue
31 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { SessionUser } from '#shared/types';
|
|
|
|
defineProps<{ user: SessionUser | null }>();
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="sticky top-0 z-40 border-b backdrop-blur-xl"
|
|
style="border-color: color-mix(in srgb, var(--border) 85%, transparent); background: color-mix(in srgb, var(--surface) 78%, transparent)"
|
|
>
|
|
<div class="page flex h-16 items-center justify-between gap-4">
|
|
<NuxtLink to="/" class="flex items-center gap-2">
|
|
<span class="font-display text-2xl leading-none tracking-tight">{{ t('brand.name') }}</span>
|
|
<span class="kicker hidden sm:inline" aria-hidden>Store</span>
|
|
</NuxtLink>
|
|
<nav class="hidden items-center gap-7 text-sm md:flex" aria-label="Main">
|
|
<NuxtLink to="/shop" class="transition-colors hover:text-[var(--text)]" style="color: var(--text-muted)">Shop</NuxtLink>
|
|
<NuxtLink v-if="user" to="/orders" class="transition-colors hover:text-[var(--text)]" style="color: var(--text-muted)">Orders</NuxtLink>
|
|
<NuxtLink v-if="user?.role === 'admin'" to="/admin" class="transition-colors hover:text-[var(--text)]" style="color: var(--text-muted)">{{ t('nav.admin') }}</NuxtLink>
|
|
</nav>
|
|
<div class="flex items-center gap-2">
|
|
<ThemeToggle />
|
|
<CartLink />
|
|
<NuxtLink v-if="user" to="/dashboard" class="btn-secondary">{{ t('nav.dashboard') }}</NuxtLink>
|
|
<NuxtLink v-else to="/login" class="btn-primary">{{ t('nav.login') }}</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|