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.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user