padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Improve layout and responsiveness of Navbar and App components

Browse source 
- Update Navbar.vue to enhance spacing and responsiveness for logo and navigation items.
- Adjust App.vue to ensure consistent padding and layout for the header and navigation.
- Refine button sizes and text scaling for better usability across different screen sizes.
This commit is contained in:
padreug 2025-07-31 22:07:57 +02:00
parent eb238ca380
commit fd4e0ea8e6
2 changed files with 19 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/App.vue
View file

@ -31,8 +31,7 @@ onMounted(async () => {
style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
<header
class="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<nav
class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
<nav class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 flex h-14 lg:h-16 xl:h-20 items-center justify-between">
<Navbar />
<<<<<<< HEAD <ConnectionStatus :is-connected="isConnected" :is-connecting="isConnecting" :error="error" />
=======

36
src/components/layout/Navbar.vue
View file

@ -62,18 +62,18 @@ const handleLogout = async () => {
<template>
<nav class="w-full text-foreground">
<div class="flex items-center justify-between px-4 md:px-0">
<div class="flex items-center justify-between">
<!-- Logo and Desktop Navigation -->
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 lg:gap-8 xl:gap-12">
<router-link to="/" class="flex items-center gap-2 text-foreground hover:text-foreground/90">
<img src="@/assets/logo.png" alt="Logo" class="h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14" />
<span class="font-semibold">{{ t('nav.title') }}</span>
<img src="@/assets/logo.png" alt="Logo" class="h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 lg:h-16 lg:w-16 xl:h-20 xl:w-20" />
<span class="font-semibold text-base lg:text-lg xl:text-xl">{{ t('nav.title') }}</span>
</router-link>
<!-- Desktop Navigation -->
<div class="hidden md:flex gap-4">
<div class="hidden md:flex gap-4 lg:gap-6 xl:gap-8">
<router-link v-for="item in navigation" :key="item.name" :to="item.href"
class="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2" :class="{
class="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2 text-sm lg:text-base xl:text-lg" :class="{
'text-foreground': $route.path === item.href
}">
{{ item.name }}
@ -82,18 +82,18 @@ const handleLogout = async () => {
</div>
<!-- Theme Toggle, Language, and Identity -->
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 lg:gap-4 xl:gap-6">
<!-- Authentication Management -->
<div class="hidden sm:block">
<DropdownMenu v-if="auth.isAuthenticated.value">
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" class="gap-2">
<User class="h-4 w-4" />
<span class="max-w-24 truncate">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs">Logged In</Badge>
<Button variant="ghost" size="sm" class="gap-2 lg:gap-3">
<User class="h-4 w-4 lg:h-5 lg:w-5" />
<span class="max-w-24 lg:max-w-32 xl:max-w-40 truncate">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs lg:text-sm">Logged In</Badge>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-56">
<DropdownMenuContent align="end" class="w-56 lg:w-64">
<DropdownMenuItem @click="openProfileDialog" class="gap-2">
<User class="h-4 w-4" />
Profile
@ -106,17 +106,17 @@ const handleLogout = async () => {
</DropdownMenuContent>
</DropdownMenu>
<Button v-else variant="outline" size="sm" @click="openLoginDialog" class="gap-2">
<User class="h-4 w-4" />
Login
<Button v-else variant="outline" size="sm" @click="openLoginDialog" class="gap-2 lg:gap-3">
<User class="h-4 w-4 lg:h-5 lg:w-5" />
<span class="hidden lg:inline">Login</span>
</Button>
</div>
<!-- Hide theme toggle on mobile -->
<Button variant="ghost" size="icon" @click="toggleTheme"
class="hidden sm:inline-flex text-foreground hover:text-foreground/90 hover:bg-accent">
<Sun v-if="theme === 'dark'" class="h-5 w-5" />
<Moon v-else class="h-5 w-5" />
<Sun v-if="theme === 'dark'" class="h-5 w-5 lg:h-6 lg:w-6" />
<Moon v-else class="h-5 w-5 lg:h-6 lg:w-6" />
</Button>
<!-- Hide language switcher on mobile -->
@ -136,7 +136,7 @@ const handleLogout = async () => {
<!-- Mobile menu -->
<div v-show="isOpen"
class="absolute left-0 right-0 top-14 z-40 border-b bg-background/95 backdrop-blur-sm md:hidden">
class="absolute left-0 right-0 top-14 lg:top-16 xl:top-20 z-40 border-b bg-background/95 backdrop-blur-sm md:hidden">
<div class="space-y-1 p-4">
<!-- Authentication in mobile menu -->
<div class="mb-4 px-2">