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

2
app/pages/products/[id].vue
View File

@@ -97,7 +97,7 @@ const handleAddToCart = async () => {
<template>
<NuxtLayout name="default">
<div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
<div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
<!-- Back Button -->
<div class="mx-auto mb-8 max-w-container-narrow">
<NuxtLink to="/products"

17
app/pages/products/index.vue
View File

@@ -52,7 +52,7 @@ const getDiscount = (category: string): number | undefined => {
<template>
<NuxtLayout name="default">
<div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
<div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
<!-- Page Header -->
<div class="mx-auto mb-12 max-w-container-wide text-center">
<h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
@@ -86,17 +86,10 @@ const getDiscount = (category: string): number | undefined => {
<!-- Products Grid -->
<div v-else-if="products && products.length > 0" class="mx-auto max-w-container-wide">
<ProductGrid :columns="3">
<ProductCard
v-for="product in products"
:key="product.id"
image="/img/makerspace-jk-2025.jpg"
:title="product.name"
:description="product.description"
:price="Number(product.price)"
:badge="getBadge(product.category)"
:discount-percentage="getDiscount(product.category)"
:product-id="product.id"
/>
<ProductCard v-for="product in products" :key="product.id" image="/img/makerspace-jk-2025.jpg"
:title="product.name" :description="product.description" :price="Number(product.price)"
:badge="getBadge(product.category)" :discount-percentage="getDiscount(product.category)"
:product-id="product.id" />
</ProductGrid>
</div>