bam/my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor Layout and Styling in UserMenu, AppHeader, and Product Pages

Browse Source 
- Adjusted button margin in UserMenu.vue for better alignment.
- Updated container classes in AppHeader.vue to use max-width for improved responsiveness.
- Modified max-width settings in product detail page to enhance layout consistency across different states (loading, error, product display).
This commit is contained in:
Bastian Masanek
2025-11-25 08:53:39 +01:00
parent 46d03a0e4a
commit 04f2e29403
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/UserMenu.vue
View File

@@ -67,7 +67,7 @@ async function handleLogout() {
<DropdownMenu v-else>
<DropdownMenuTrigger as-child>
<button
class="flex items-center gap-3 rounded-[35px] px-2 py-[10px] focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10"
class="flex items-center gap-3 rounded-[35px] px-2 py-[10px] focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10 -mr-2"
aria-label="Benutzermenü öffnen">
<!-- Greeting text (Desktop only) -->
<span class="hidden md:inline font-medium text-white pl-2">

6
app/components/navigation/AppHeader.vue
View File

@@ -10,7 +10,7 @@ const { loggedIn } = useAuth()
<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">
<div class="max-w-7xl mx-auto flex items-end justify-between px-4 sm: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">
@@ -35,14 +35,14 @@ const { loggedIn } = useAuth()
<!-- 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">
<div class="max-w-7xl mx-auto px-4 sm: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">
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-2.5">
<RoleSwitcher />
</div>
</div>