From 3323302021f6aa615d3629e8729cfd713268ec84 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 8 Oct 2025 19:50:06 +0200
Subject: [PATCH] refactor(navbar, app): improve layout and styling for better
 responsiveness

- Adjusted CSS styles in the navbar for improved readability and responsiveness.
- Updated the layout of the sidebar and navbar components to enhance user experience on different screen sizes.
- Ensured consistent alignment and spacing for elements within the navbar and sidebar.
---
 resources/views/components/navbar.blade.php | 34 ++++++++++-----------
 resources/views/layouts/app.blade.php       | 12 +++++---
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index defa7bf6c..4b152dd11 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -59,25 +59,25 @@
                 if (this.zoom === '90') {
                     const style = document.createElement('style');
                     style.textContent = `
-                                        html {
-                                            font-size: 93.75%;
-                                        }
-                    
-                                        :root {
-                                            --vh: 1vh;
-                                        }
-                    
-                                        @media (min-width: 1024px) {
-                                            html {
-                                                font-size: 87.5%;
-                                            }
-                                        }
-                                    `;
+                                                    html {
+                                                        font-size: 93.75%;
+                                                    }
+                                
+                                                    :root {
+                                                        --vh: 1vh;
+                                                    }
+                                
+                                                    @media (min-width: 1024px) {
+                                                        html {
+                                                            font-size: 87.5%;
+                                                        }
+                                                    }
+                                                `;
                     document.head.appendChild(style);
                 }
             }
     }">
-    <div class="flex pt-6 pb-4 pl-2">
+    <div class="flex lg:pt-6 pt-4 pb-4 pl-2">
         <div class="flex flex-col w-full">
             <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
             <x-version />
@@ -86,8 +86,8 @@
             <!-- Search button that triggers global search modal -->
             <button @click="$dispatch('open-global-search')" type="button" title="Search (Press / or ⌘K)"
                 class="flex items-center gap-1.5 px-2.5 py-1.5 bg-neutral-100 dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-200 rounded-md hover:bg-neutral-200 dark:hover:bg-coolgray-200 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-neutral-500 dark:text-neutral-400" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-neutral-500 dark:text-neutral-400"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                         d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 409f66ad9..55fb417f5 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -20,9 +20,9 @@
         }" x-cloak class="mx-auto" :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
-                <div class="fixed h-full flex">
+                <div class="fixed inset-y-0 right-0 h-full flex">
                     <div class="relative flex flex-1 w-full max-w-56 ">
-                        <div class="absolute top-0 flex justify-center w-16 pt-5 left-full">
+                        <div class="absolute top-0 flex justify-center w-16 pt-5 right-full">
                             <button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
                                 <span class="sr-only">Close sidebar</span>
                                 <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -45,8 +45,12 @@
                 </div>
             </div>
 
-            <div class="sticky top-0 z-40 flex items-center px-4 py-4 gap-x-6 sm:px-6 lg:hidden">
-                <button type="button" class="-m-2.5 p-2.5 dark:text-warning lg:hidden" x-on:click="open = !open">
+            <div class="sticky top-0 z-40 flex items-center justify-between px-4 py-4 gap-x-6 sm:px-6 lg:hidden">
+                <div class="flex items-center gap-3 flex-shrink-0">
+                    <div class="text-xl font-bold tracking-wide dark:text-white">Coolify</div>
+                    <livewire:switch-team />
+                </div>
+                <button type="button" class="-m-2.5 p-2.5 dark:text-warning" x-on:click="open = !open">
                     <span class="sr-only">Open sidebar</span>
                     <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
                         <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"