a22e4b42ca
- Updated UserMenu.vue to enhance button styling and spacing for a more modern look. - Simplified CartFAB.vue to always show the cart button when items are present, regardless of the route. - Adjusted AppHeader.vue for better alignment of elements. - Enhanced AreaTabs.vue to enable the educator tab and improve badge styling. - Refined BottomNav.vue to handle cart visibility and navigation more effectively. These changes aim to enhance user navigation and overall experience within the application.
60 lines
2.0 KiB
Vue
60 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ShoppingCart } from 'lucide-vue-next'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
// Get cart data
|
|
const { itemCount, total } = useCart()
|
|
const { open } = useCartUI()
|
|
|
|
// Determine if FAB should be visible
|
|
const isVisible = computed(() => {
|
|
// Show when cart has items (on all pages)
|
|
return itemCount.value > 0
|
|
})
|
|
|
|
// Format price as EUR in German locale
|
|
const formattedTotal = computed(() => {
|
|
return new Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(total.value)
|
|
})
|
|
|
|
// Handle FAB click
|
|
function handleClick() {
|
|
open()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Transition enter-active-class="transition-all duration-200 ease-out" enter-from-class="scale-0 opacity-0"
|
|
enter-to-class="scale-100 opacity-100" leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="scale-100 opacity-100" leave-to-class="scale-0 opacity-0">
|
|
<div v-if="isVisible" class="fixed bottom-20 right-4 z-40">
|
|
<!-- FAB Button -->
|
|
<Button @click="handleClick"
|
|
class="h-16 w-16 rounded-full shadow-gray-900 shadow-lg transition-all duration-200 hover:scale-110 active:scale-95"
|
|
variant="default" size="icon" aria-label="Warenkorb öffnen">
|
|
<!-- Cart icon with relative positioning for badge -->
|
|
<div class="relative">
|
|
<ShoppingCart class="h-6 w-6 scale-150" />
|
|
|
|
<!-- Item count badge -->
|
|
<Badge
|
|
class="absolute -top-4 -right-4 h-5.5 min-w-[22px] px-1.5 flex items-center justify-center bg-experimenta-accent text-white text-xs font-bold border-2 border-purple-darkest shadow-lg scale-75">
|
|
{{ itemCount > 99 ? '99+' : itemCount }}
|
|
</Badge>
|
|
</div>
|
|
</Button>
|
|
|
|
<!-- Price text below button -->
|
|
<!-- <div class="mt-2 text-center">
|
|
<p class="text-xs font-semibold text-foreground whitespace-nowrap">
|
|
{{ formattedTotal }}
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
</Transition>
|
|
</template>
|