You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.4 KiB
88 lines
2.4 KiB
<script setup lang="ts">
|
|
import RoleSwitcher from './RoleSwitcher.vue'
|
|
import AreaTabs from './AreaTabs.vue'
|
|
import CartButton from './CartButton.vue'
|
|
import UserMenu from '../UserMenu.vue'
|
|
|
|
const { loggedIn } = useAuth()
|
|
</script>
|
|
|
|
<template>
|
|
<header class="sticky top-0 z-50 w-full">
|
|
<!-- Main header bar -->
|
|
<div class="container flex items-end justify-between px-4 md:px-6 lg:px-8 py-6 md:py-7">
|
|
<!-- Left: Logo + Role Switcher -->
|
|
<div class="flex items-end gap-6 md:gap-8">
|
|
<NuxtLink to="/" class="flex-shrink-0 transition-transform hover:scale-105">
|
|
<img src="/img/experimenta-logo-white.svg" alt="experimenta Logo" class="h-16 w-auto md:h-16 my-1" />
|
|
</NuxtLink>
|
|
|
|
<!-- Role Switcher (Desktop only, only when logged in) -->
|
|
<div v-if="loggedIn" class="hidden lg:block">
|
|
<RoleSwitcher />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Cart + User Menu -->
|
|
<div class="flex items-end md:gap-6">
|
|
<!-- Cart Button (only visible when logged in) -->
|
|
<CartButton v-if="loggedIn" />
|
|
|
|
<!-- User Menu -->
|
|
<UserMenu />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secondary navigation bar (Product areas) - No borders, gradient separation -->
|
|
<div class="area-tabs-section">
|
|
<div class="container px-4 md:px-6 lg:px-8 py-3">
|
|
<AreaTabs />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Custom experimenta styling */
|
|
header {
|
|
background: linear-gradient(135deg,
|
|
rgba(46, 16, 101, 0.98) 0%,
|
|
rgba(46, 16, 101, 0.95) 100%);
|
|
color: white;
|
|
}
|
|
|
|
/* Area tabs section with subtle gradient separator (no borders) */
|
|
.area-tabs-section {
|
|
background: linear-gradient(180deg,
|
|
rgba(255, 255, 255, 0.08) 0%,
|
|
rgba(255, 255, 255, 0.03) 100%);
|
|
}
|
|
|
|
/* Mobile role section */
|
|
.mobile-role-section {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Logo styling */
|
|
img[alt='experimenta Logo'] {
|
|
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
|
|
}
|
|
|
|
/* Ensure text is white in header */
|
|
:deep(button),
|
|
:deep(a) {
|
|
color: white;
|
|
}
|
|
|
|
:deep(.text-foreground),
|
|
:deep(.text-muted-foreground) {
|
|
color: rgba(255, 255, 255, 0.9) !important;
|
|
}
|
|
</style>
|
|
|