bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor navigation components for improved layout and functionality

Browse Source 
- 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.
This commit is contained in:
Bastian Masanek
2025-11-03 19:20:10 +01:00
parent 37a1d234a7
commit a22e4b42ca
10 changed files with 82 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/navigation/CartButton.vue
View File

@@ -24,28 +24,20 @@ function handleClick(e: Event) {
<template>
<!-- Desktop cart button (visible only on lg and up) -->
<button
@click="handleClick"
class="relative hidden lg:flex items-center gap-4 rounded-[35px] px-6 py-1.5 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent"
aria-label="Warenkorb öffnen"
>
<button @click="handleClick" :class="[
'relative hidden lg:flex items-center rounded-[35px] px-6 py-1.5 transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 focus:ring-offset-transparent',
hasItems ? 'gap-2' : 'gap-1'
]" aria-label="Warenkorb öffnen">
<!-- Cart icon with item count badge -->
<div class="relative inline-flex items-center justify-center h-12 w-12">
<div class="relative inline-flex items-center justify-center h-14 w-12">
<ShoppingCart class="h-6 w-6 text-white" strokeWidth="2" />
<!-- Item count badge -->
<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"
>
<Badge
v-if="hasItems"
class="absolute -top-1 -right-1 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"
>
<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">
<Badge v-if="hasItems"
class="absolute -top-1 -right-1 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 pointer-events-none">
{{ itemCount > 99 ? '99+' : itemCount }}
</Badge>
</Transition>
@@ -55,11 +47,5 @@ function handleClick(e: Event) {
<span class="text-base font-bold text-white tabular-nums">
{{ formattedTotal }}
</span>
<!-- Static background -->
<span
class="absolute inset-0 rounded-[35px] bg-white/10"
aria-hidden="true"
/>
</button>
</template>