Refactor AppHeader and AreaTabs components for improved layout and functionality

- Adjusted AppHeader.vue for better spacing and alignment of elements, enhancing the overall visual appeal.
- Updated AreaTabs.vue to include a new 'Start' tab with a home icon, improving navigation options.
- Modified route handling in AreaTabs.vue to dynamically determine the current area based on the route.
- Changed default redirect destination in useAuth.ts to the root path for a more intuitive user experience.
- Enhanced index.vue to provide a more welcoming message and improved content presentation.

These changes aim to enhance user navigation and overall experience within the application.
This commit is contained in:
Bastian Masanek
2025-11-03 17:36:54 +01:00
parent f6f09ca147
commit 860cd3ec9d
4 changed files with 39 additions and 35 deletions

View File

@@ -14,11 +14,8 @@ const { loggedIn } = useAuth()
<!-- Left: Logo + Role Switcher -->
<div class="flex items-center 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-14 w-auto md:h-16 drop-shadow-lg"
/>
<img src="/img/experimenta-logo-white.svg" alt="experimenta Logo"
class="h-14 w-auto md:h-16 drop-shadow-lg" />
</NuxtLink>
<!-- Role Switcher (Desktop only) -->
@@ -56,21 +53,17 @@ const { loggedIn } = useAuth()
<style scoped>
/* Custom experimenta styling */
header {
background: linear-gradient(
135deg,
rgba(46, 16, 101, 0.98) 0%,
rgba(46, 16, 101, 0.95) 100%
);
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%
);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%);
}
/* Mobile role section */