Leopoldadmin/hms-licht-ton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(T07): Warenkorb & Mietanfrage frontend – cart store, drawer, pages, form, tests

Browse Source
This commit is contained in:
Implementation Engineer
2026-07-10 01:32:19 +02:00
parent e220ff7db9
commit a1bba48cd7
19 changed files with 1874 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/AppHeader.vue
+43 -1
View File
@@ -21,7 +21,7 @@
<NuxtLink to="/kontakt" class="nav-link">Kontakt</NuxtLink>
</nav>
<!-- Desktop Right: Phone + Social -->
<!-- Desktop Right: Phone + Social + Cart -->
<div class="hidden md:flex items-center gap-4">
<a
href="tel:+491726264796"
@@ -34,6 +34,23 @@
<span>+49 172 6264796</span>
</a>
<!-- Cart Icon with Counter Badge -->
<button
class="relative flex items-center justify-center w-10 h-10 text-text-muted hover:text-accent transition-colors duration-fast min-h-44px"
aria-label="Warenkorb öffnen"
data-testid="header-cart-button"
@click="cartDrawerOpen = true"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
<span
v-if="cartCount > 0"
class="absolute -top-1 -right-1 bg-accent text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
data-testid="header-cart-count"
>{{ cartCount }}</span>
</button>
<a
href="https://www.facebook.com/hms.licht.ton"
target="_blank"
@@ -61,6 +78,23 @@
</a>
</div>
<!-- Mobile Cart Button -->
<button
class="md:hidden relative flex items-center justify-center w-11 h-11 text-text-muted hover:text-accent transition-colors duration-fast"
aria-label="Warenkorb öffnen"
data-testid="header-cart-button-mobile"
@click="cartDrawerOpen = true"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
<span
v-if="cartCount > 0"
class="absolute -top-1 -right-1 bg-accent text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center"
data-testid="header-cart-count-mobile"
>{{ cartCount }}</span>
</button>
<!-- Mobile Burger Button -->
<button
class="md:hidden flex items-center justify-center w-11 h-11 text-text-muted hover:text-accent transition-colors duration-fast"
@@ -116,10 +150,18 @@
</div>
</nav>
</header>
<!-- Cart Drawer -->
<CartDrawer v-model="cartDrawerOpen" />
</template>
<script setup lang="ts">
import { useCart } from "~/composables/useCart";
const { totalCount: cartCount } = useCart();
const mobileMenuOpen = ref(false);
const cartDrawerOpen = ref(false);
function toggleMobileMenu(): void {
mobileMenuOpen.value = !mobileMenuOpen.value;