Refactor navigation components for improved layout and functionality

- 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.

app/components/navigation/AreaTabs.vue

@@ -34,7 +34,7 @@ const areas: ProductArea[] = [
     id: 'educator',
     label: 'Bildung',
     icon: GraduationCap,
-    enabled: false,
+    enabled: true,
     visible: true,
     badge: 'Demnächst',
     route: '/educator',
@@ -97,13 +97,12 @@ function navigateToArea(area: ProductArea) {
           ]" @click="navigateToArea(area)">
           <component :is="area.icon" class="h-4 w-4" />
           <span>{{ area.label }}</span>
-          <Badge v-if="area.badge"
-            :class="[
-              'ml-1 text-[10px] px-1.5 py-0.5 transition-colors',
-              currentArea === area.id
-                ? 'bg-white/90 text-purple-950 border-white/50'
-                : 'bg-experimenta-accent/20 text-experimenta-accent border-experimenta-accent/30 hover:bg-experimenta-accent/30'
-            ]">
+          <Badge v-if="area.badge" :class="[
+            'ml-1 text-[10px] px-1.5 py-0.5 pointer-events-none rounded-[35px]',
+            currentArea === area.id
+              ? 'bg-white/90 text-purple-950 border-white/50'
+              : 'bg-experimenta-accent/20 text-experimenta-accent border-experimenta-accent/30'
+          ]">
             {{ area.badge }}
           </Badge>
         </TabsTrigger>
@@ -122,13 +121,12 @@ function navigateToArea(area: ProductArea) {
         ]" @click="navigateToArea(area)">
           <component :is="area.icon" class="h-4 w-4" />
           <span>{{ area.label }}</span>
-          <Badge v-if="area.badge"
-            :class="[
-              'ml-1 text-[10px] px-1.5 py-0.5 transition-colors',
-              currentArea === area.id
-                ? 'bg-white/90 text-purple-950 border-white/50'
-                : 'bg-experimenta-accent/20 text-experimenta-accent border-experimenta-accent/30 hover:bg-experimenta-accent/30'
-            ]">
+          <Badge v-if="area.badge" :class="[
+            'ml-1 text-[10px] px-1.5 py-0.5 pointer-events-none rounded-[35px]',
+            currentArea === area.id
+              ? 'bg-white/90 text-purple-950 border-white/50'
+              : 'bg-experimenta-accent/20 text-experimenta-accent border-experimenta-accent/30'
+          ]">
             {{ area.badge }}
           </Badge>
         </button>