29 lines
1.3 KiB
Vue
29 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
// Barre fixe en bas d'écran sur mobile : CTA "Commander" toujours visible
|
||
|
|
const { count, subtotal } = useCart()
|
||
|
|
const route = useRoute()
|
||
|
|
const to = computed(() => count.value ? '/panier' : '/menu')
|
||
|
|
const hidden = computed(() => route.path.startsWith('/panier') || route.path.startsWith('/commande'))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div v-if="!hidden" class="mbar">
|
||
|
|
<NuxtLink :to="to" class="btn btn-primary btn-lg inner">
|
||
|
|
<span>{{ count ? 'Voir le panier' : 'Commander' }}</span>
|
||
|
|
<ClientOnly>
|
||
|
|
<span v-if="count" class="sum">{{ count }} article{{ count > 1 ? 's' : '' }} · {{ eur(subtotal) }}</span>
|
||
|
|
<Icon v-else name="arrow" :stroke="2.6" />
|
||
|
|
</ClientOnly>
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(20,16,13,0), rgba(20,16,13,.96) 35%); }
|
||
|
|
.inner { width: 100%; justify-content: space-between; padding: 0 8px 0 20px; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
|
||
|
|
.inner > span:first-child { padding-left: 0; }
|
||
|
|
.sum { padding: 9px 14px; border-radius: 14px; background: var(--bg); color: var(--cream); font-size: 14px; }
|
||
|
|
.inner :deep(svg) { margin-right: 12px; }
|
||
|
|
@media (min-width: 1024px) { .mbar { display: none; } }
|
||
|
|
</style>
|