From fd4e0ea8e6eaa46f9dfa20d96fe1f4c6336d90f5 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Thu, 31 Jul 2025 22:07:57 +0200
Subject: [PATCH] refactor: Improve layout and responsiveness of Navbar and App
 components

- 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.
---
 src/App.vue                      |  3 +--
 src/components/layout/Navbar.vue | 36 ++++++++++++++++----------------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 56cd297..4bbe64f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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" />
           =======
diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 81b4e34..2a734ab 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -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">