From 2bda321fe70695c6f8ee234a1caa3efbef4d8fe7 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Mon, 3 Nov 2025 19:22:29 +0100
Subject: [PATCH] Enhance navigation components to conditionally display role
 switcher based on user login status

- Updated AppHeader.vue to show the role switcher only when the user is logged in, improving the relevance of displayed options.
- Modified CartButton.vue to adjust spacing based on item presence, enhancing visual consistency.

These changes aim to refine user navigation and ensure a more tailored experience within the application.
---
 app/components/navigation/AppHeader.vue  | 8 ++++----
 app/components/navigation/CartButton.vue | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/navigation/AppHeader.vue b/app/components/navigation/AppHeader.vue
index 10acbb1..a73d024 100644
--- a/app/components/navigation/AppHeader.vue
+++ b/app/components/navigation/AppHeader.vue
@@ -17,8 +17,8 @@ const { loggedIn } = useAuth()
           <img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="h-16 w-auto md:h-20 lg:h-22" />
         </NuxtLink>
 
-        <!-- Role Switcher (Desktop only) -->
-        <div class="hidden lg:block">
+        <!-- Role Switcher (Desktop only, only when logged in) -->
+        <div v-if="loggedIn" class="hidden lg:block">
           <RoleSwitcher />
         </div>
       </div>
@@ -40,8 +40,8 @@ const { loggedIn } = useAuth()
       </div>
     </div>
 
-    <!-- Mobile: Role switcher in collapsible section (optional) -->
-    <div class="lg:hidden mobile-role-section">
+    <!-- Mobile: Role switcher in collapsible section (only when logged in) -->
+    <div v-if="loggedIn" class="lg:hidden mobile-role-section">
       <div class="container px-4 py-2.5">
         <RoleSwitcher />
       </div>
diff --git a/app/components/navigation/CartButton.vue b/app/components/navigation/CartButton.vue
index d75d0df..1f49d50 100644
--- a/app/components/navigation/CartButton.vue
+++ b/app/components/navigation/CartButton.vue
@@ -26,7 +26,7 @@ function handleClick(e: Event) {
   <!-- Desktop cart button (visible only on lg and up) -->
   <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'
+    hasItems ? 'gap-2' : 'gap-0'
   ]" aria-label="Warenkorb öffnen">
     <!-- Cart icon with item count badge -->
     <div class="relative inline-flex items-center justify-center h-14 w-12">