Refactor UserMenu and navigation components for improved user experience

- Enhanced UserMenu.vue by implementing an extended user type for better user data handling and updated user initials logic.
- Adjusted AppHeader.vue and AreaTabs.vue for improved layout and spacing, ensuring a more cohesive design.
- Updated CartButton.vue and Tabs components for consistent styling and better responsiveness.

These changes aim to enhance the overall usability and visual appeal of the application, providing a smoother user experience.
This commit is contained in:
Bastian Masanek
2025-11-03 18:28:27 +01:00
parent 860cd3ec9d
commit 37a1d234a7
6 changed files with 51 additions and 34 deletions

View File

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
<template>
<TabsList v-bind="forwarded" :class="cn(
'inline-flex h-auto items-center justify-center rounded-[35px] bg-white/5 p-1.5 text-white/70',
'inline-flex h-auto items-center justify-center rounded-[45px] bg-white/5 p-1.5 text-white/70',
props.class
)
">

View File

@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps)
<template>
<TabsTrigger v-bind="forwarded" :class="cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-[25px] px-4 py-[10px] text-lg font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md leading-[1.7em]',
'inline-flex items-center justify-center whitespace-nowrap rounded-[45px] px-4 py-[10px] text-lg font-medium ring-offset-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-white/70 hover:text-white data-[state=active]:bg-accent data-[state=active]:text-white data-[state=active]:shadow-md leading-[1.7em]',
props.class
)">
<slot />