50 lines
2.4 KiB
Vue
50 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
const { count, bump } = useCart()
|
|
const { open, wait } = useShop()
|
|
const popping = ref(false)
|
|
watch(bump, () => { popping.value = false; requestAnimationFrame(() => { popping.value = true }) })
|
|
</script>
|
|
|
|
<template>
|
|
<header class="hdr">
|
|
<div class="container row inner">
|
|
<Logo />
|
|
<nav class="nav" aria-label="Navigation principale">
|
|
<NuxtLink to="/menu">Menu</NuxtLink>
|
|
<NuxtLink to="/#avis">Avis</NuxtLink>
|
|
<NuxtLink to="/#infos">Infos</NuxtLink>
|
|
</nav>
|
|
<div class="row right">
|
|
<span class="status small">
|
|
<template v-if="open"><span class="dot dot-green blink" /> Ouvert · ~{{ wait }} min</template>
|
|
<template v-else><span class="dot dot-red" /> Commandes en pause</template>
|
|
</span>
|
|
<NuxtLink to="/panier" class="cartb" :aria-label="`Panier, ${count} article(s)`">
|
|
<Icon name="cart" :size="21" />
|
|
<ClientOnly><span v-if="count" class="cnt" :class="{ pop: popping }">{{ count }}</span></ClientOnly>
|
|
</NuxtLink>
|
|
<NuxtLink to="/menu" class="btn btn-primary cta">Commander</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(20,16,13,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(243,227,195,.08); }
|
|
.inner { gap: 20px; min-height: 70px; }
|
|
.nav { display: flex; gap: 14px; font-size: 14px; font-weight: 700; margin-left: auto; }
|
|
.nav a { color: var(--cream); text-decoration: none; }
|
|
.nav a:hover, .nav a.router-link-exact-active { color: var(--orange-1); }
|
|
.right { gap: 12px; }
|
|
.status { display: none; align-items: center; gap: 8px; font-weight: 700; }
|
|
.cartb { position: relative; width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--cream); }
|
|
.cnt { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--orange-2); color: var(--bg); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
|
|
.cta { display: none; }
|
|
@media (min-width: 900px) {
|
|
.nav { gap: 28px; font-size: 15px; margin-left: 12px; }
|
|
.right { margin-left: auto; }
|
|
.status { display: inline-flex; }
|
|
.cta { display: inline-flex; }
|
|
}
|
|
@media (max-width: 380px) { .nav { gap: 10px; font-size: 13px; } }
|
|
</style>
|