From 91dbf1f01a5721d46f17738da9da955293cd658b Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 16:33:52 +0000
Subject: [PATCH] navbar changed in order top move as first element the button
 for start/redeploy

---
 resources/css/app.css                         |   4 +-
 .../components/notification/navbar.blade.php  |  30 +++--
 .../components/security/navbar.blade.php      |  18 +--
 .../views/components/server/navbar.blade.php  |  70 +++++-----
 .../components/settings/navbar.blade.php      |  26 ++--
 .../views/components/team/navbar.blade.php    |  22 ++--
 .../project/application/general.blade.php     |   2 +-
 .../project/application/heading.blade.php     |  34 ++---
 .../project/database/heading.blade.php        | 121 +++++++++---------
 .../livewire/project/service/navbar.blade.php |  15 ++-
 10 files changed, 179 insertions(+), 163 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index aaa717700..fd3e1d174 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -157,7 +157,7 @@ tr td:first-child {
 }
 
 .menu-item {
-    @apply flex items-center w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
+    @apply flex items-center text-sm w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
 }
 
 .menu-item-active {
@@ -185,7 +185,7 @@ tr td:first-child {
 }
 
 .navbar-main {
-    @apply flex items-center h-fit gap-6 pb-2 border-b-2 border-solid dark:border-coolgray-200 overflow-x-scroll min-h-10;
+    @apply flex h-fit flex-col sm:flex-row justify-items-start sm:justify-between gap-4 pb-2 border-b-2 border-solid dark:border-coolgray-200 sm:items-center;
 }
 
 .loading {
diff --git a/resources/views/components/notification/navbar.blade.php b/resources/views/components/notification/navbar.blade.php
index 24b4fecfd..50e8ae89d 100644
--- a/resources/views/components/notification/navbar.blade.php
+++ b/resources/views/components/notification/navbar.blade.php
@@ -1,18 +1,20 @@
 <div class="pb-6">
     <h1>Notifications</h1>
     <div class="subtitle">Get notified about your infrastructure.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
-            href="{{ route('notifications.email') }}">
-            <button>Email</button>
-        </a>
-        <a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}"
-            href="{{ route('notifications.telegram') }}">
-            <button>Telegram</button>
-        </a>
-        <a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}"
-            href="{{ route('notifications.discord') }}">
-            <button>Discord</button>
-        </a>
-    </nav>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
+                href="{{ route('notifications.email') }}">
+                <button>Email</button>
+            </a>
+            <a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}"
+                href="{{ route('notifications.telegram') }}">
+                <button>Telegram</button>
+            </a>
+            <a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}"
+                href="{{ route('notifications.discord') }}">
+                <button>Discord</button>
+            </a>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/components/security/navbar.blade.php b/resources/views/components/security/navbar.blade.php
index 5ad4afb3c..e3add9776 100644
--- a/resources/views/components/security/navbar.blade.php
+++ b/resources/views/components/security/navbar.blade.php
@@ -1,12 +1,14 @@
 <div class="pb-6">
     <h1>Security</h1>
     <div class="subtitle">Security related settings.</div>
-    <nav class="navbar-main">
-        <a  href="{{ route('security.private-key.index') }}">
-            <button>Private Keys</button>
-        </a>
-        <a  href="{{ route('security.api-tokens') }}">
-            <button>API tokens</button>
-        </a>
-    </nav>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a href="{{ route('security.private-key.index') }}">
+                <button>Private Keys</button>
+            </a>
+            <a href="{{ route('security.api-tokens') }}">
+                <button>API tokens</button>
+            </a>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/components/server/navbar.blade.php b/resources/views/components/server/navbar.blade.php
index 2130d0031..6d23af891 100644
--- a/resources/views/components/server/navbar.blade.php
+++ b/resources/views/components/server/navbar.blade.php
@@ -5,47 +5,49 @@
         <livewire:server.proxy.status :server="$server" />
     </div>
     <div class="subtitle">{{ data_get($server, 'name') }}.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
-            href="{{ route('server.show', [
-                'server_uuid' => data_get($parameters, 'server_uuid'),
-            ]) }}">
-            <button>General</button>
-        </a>
-        <a class="{{ request()->routeIs('server.private-key') ? 'dark:text-white' : '' }}"
-            href="{{ route('server.private-key', [
-                'server_uuid' => data_get($parameters, 'server_uuid'),
-            ]) }}">
-            <button>Private Key</button>
-        </a>
-        <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
-            href="{{ route('server.resources', [
-                'server_uuid' => data_get($parameters, 'server_uuid'),
-            ]) }}">
-            <button>Resources</button>
-        </a>
-        @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
-            <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.proxy', [
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
+                href="{{ route('server.show', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
-                <button>Proxy</button>
+                <button>General</button>
             </a>
-            <a class="{{ request()->routeIs('server.destinations') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.destinations', [
+            <a class="{{ request()->routeIs('server.private-key') ? 'dark:text-white' : '' }}"
+                href="{{ route('server.private-key', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
-                <button>Destinations</button>
+                <button>Private Key</button>
             </a>
-            <a class="{{ request()->routeIs('server.log-drains') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.log-drains', [
+            <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
+                href="{{ route('server.resources', [
                     'server_uuid' => data_get($parameters, 'server_uuid'),
                 ]) }}">
-                <button>Log Drains</button>
+                <button>Resources</button>
             </a>
-        @endif
-
-        <div class="flex-1"></div>
-        <livewire:server.proxy.deploy :server="$server" />
-    </nav>
+            @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
+                <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
+                    href="{{ route('server.proxy', [
+                        'server_uuid' => data_get($parameters, 'server_uuid'),
+                    ]) }}">
+                    <button>Proxy</button>
+                </a>
+                <a class="{{ request()->routeIs('server.destinations') ? 'dark:text-white' : '' }}"
+                    href="{{ route('server.destinations', [
+                        'server_uuid' => data_get($parameters, 'server_uuid'),
+                    ]) }}">
+                    <button>Destinations</button>
+                </a>
+                <a class="{{ request()->routeIs('server.log-drains') ? 'dark:text-white' : '' }}"
+                    href="{{ route('server.log-drains', [
+                        'server_uuid' => data_get($parameters, 'server_uuid'),
+                    ]) }}">
+                    <button>Log Drains</button>
+                </a>
+            @endif
+        </nav>
+        <div class="order-first sm:order-last">
+            <livewire:server.proxy.deploy :server="$server" />
+        </div>
+    </div>
 </div>
diff --git a/resources/views/components/settings/navbar.blade.php b/resources/views/components/settings/navbar.blade.php
index fc431d220..fff8cc4b8 100644
--- a/resources/views/components/settings/navbar.blade.php
+++ b/resources/views/components/settings/navbar.blade.php
@@ -1,17 +1,19 @@
 <div class="pb-5">
     <h1>Settings</h1>
     <div class="subtitle">Instance wide settings for Coolify.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
-            href="{{ route('settings.index') }}">
-            <button>Configuration</button>
-        </a>
-        @if (isCloud())
-            <a class="{{ request()->routeIs('settings.license') ? 'dark:text-white' : '' }}"
-                href="{{ route('settings.license') }}">
-                <button>Resale License</button>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
+                href="{{ route('settings.index') }}">
+                <button>Configuration</button>
             </a>
-        @endif
-        <div class="flex-1"></div>
-    </nav>
+            @if (isCloud())
+                <a class="{{ request()->routeIs('settings.license') ? 'dark:text-white' : '' }}"
+                    href="{{ route('settings.license') }}">
+                    <button>Resale License</button>
+                </a>
+            @endif
+            <div class="flex-1"></div>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/components/team/navbar.blade.php b/resources/views/components/team/navbar.blade.php
index 2c38d9695..d5fe82f95 100644
--- a/resources/views/components/team/navbar.blade.php
+++ b/resources/views/components/team/navbar.blade.php
@@ -6,14 +6,16 @@
         </x-modal-input>
     </div>
     <div class="subtitle">Team wide configurations.</div>
-    <nav class="navbar-main">
-        <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
-            <button>General</button>
-        </a>
-        <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
-            href="{{ route('team.member.index') }}">
-            <button>Members</button>
-        </a>
-        <div class="flex-1"></div>
-    </nav>
+    <div class="navbar-main">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
+                <button>General</button>
+            </a>
+            <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
+                href="{{ route('team.member.index') }}">
+                <button>Members</button>
+            </a>
+            <div class="flex-1"></div>
+        </nav>
+    </div>
 </div>
diff --git a/resources/views/livewire/project/application/general.blade.php b/resources/views/livewire/project/application/general.blade.php
index c6aa05813..1f112288a 100644
--- a/resources/views/livewire/project/application/general.blade.php
+++ b/resources/views/livewire/project/application/general.blade.php
@@ -116,7 +116,7 @@
             @if ($application->build_pack !== 'dockerimage')
                 <h3 class="pt-8">Build</h3>
                 @if ($application->build_pack !== 'dockercompose')
-                    <div class="w-96">
+                    <div class="max-w-96">
                         <x-forms.checkbox
                             helper="Use a build server to build your application. You can configure your build server in the Server settings. This is experimental. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
                             instantSave id="application.settings.is_build_server_enabled"
diff --git a/resources/views/livewire/project/application/heading.blade.php b/resources/views/livewire/project/application/heading.blade.php
index 4375d6cfb..29ff99e71 100644
--- a/resources/views/livewire/project/application/heading.blade.php
+++ b/resources/views/livewire/project/application/heading.blade.php
@@ -1,23 +1,24 @@
 <nav wire:poll.5000ms="check_status">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" />
     <div class="navbar-main">
-        <a href="{{ route('project.application.configuration', $parameters) }}">
-            Configuration
-        </a>
-        <a href="{{ route('project.application.deployment.index', $parameters) }}">
-            <button>Deployments</button>
-        </a>
-        <a href="{{ route('project.application.logs', $parameters) }}">
-            <button>Logs</button>
-        </a>
-        @if (!$application->destination->server->isSwarm())
-            <a href="{{ route('project.application.command', $parameters) }}">
-                <button>Command</button>
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a href="{{ route('project.application.configuration', $parameters) }}">
+                Configuration
             </a>
-        @endif
-        <x-applications.links :application="$application" />
-        <div class="flex-1"></div>
-        <div class="flex items-center gap-2">
+            <a href="{{ route('project.application.deployment.index', $parameters) }}">
+                <button>Deployments</button>
+            </a>
+            <a href="{{ route('project.application.logs', $parameters) }}">
+                <button>Logs</button>
+            </a>
+            @if (!$application->destination->server->isSwarm())
+                <a href="{{ route('project.application.command', $parameters) }}">
+                    <button>Command</button>
+                </a>
+            @endif
+            <x-applications.links :application="$application" />
+        </nav>
+        <div class="flex items-center gap-2 order-first sm:order-last">
             @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
                 <div>Please load a Compose file.</div>
             @else
@@ -100,6 +101,7 @@
                 </div>
             @endif
         </div>
+
     </div>
     @script
         <script>
diff --git a/resources/views/livewire/project/database/heading.blade.php b/resources/views/livewire/project/database/heading.blade.php
index 2829d4a8d..9b94c11ce 100644
--- a/resources/views/livewire/project/database/heading.blade.php
+++ b/resources/views/livewire/project/database/heading.blade.php
@@ -7,67 +7,70 @@
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
-        <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.database.configuration', $parameters) }}">
-            <button>Configuration</button>
-        </a>
-        <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.database.command', $parameters) }}">
-            <button>Execute Command</button>
-        </a>
-        <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.database.logs', $parameters) }}">
-            <button>Logs</button>
-        </a>
-        @if (
-            $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
-                $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
-                $database->getMorphClass() === 'App\Models\StandaloneMysql' ||
-                $database->getMorphClass() === 'App\Models\StandaloneMariadb')
-            <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
-                href="{{ route('project.database.backup.index', $parameters) }}">
-                <button>Backups</button>
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.database.configuration', $parameters) }}">
+                <button>Configuration</button>
             </a>
-        @endif
-        <div class="flex-1"></div>
-        @if (!str($database->status)->startsWith('exited'))
-            <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
-                <x-slot:button-title>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
-                        stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+            <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.database.command', $parameters) }}">
+                <button>Execute Command</button>
+            </a>
+            <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.database.logs', $parameters) }}">
+                <button>Logs</button>
+            </a>
+            @if (
+                $database->getMorphClass() === 'App\Models\StandalonePostgresql' ||
+                    $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
+                    $database->getMorphClass() === 'App\Models\StandaloneMysql' ||
+                    $database->getMorphClass() === 'App\Models\StandaloneMariadb')
+                <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}"
+                    href="{{ route('project.database.backup.index', $parameters) }}">
+                    <button>Backups</button>
+                </a>
+            @endif
+        </nav>
+        <div class="flex items-center gap-2 order-first sm:order-last">
+            @if (!str($database->status)->startsWith('exited'))
+                <x-modal-confirmation @click="$wire.dispatch('stopEvent')">
+                    <x-slot:button-title>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                            <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                            </path>
+                            <path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                            </path>
+                        </svg>
+                        Stop
+                    </x-slot:button-title>
+                    This database will be stopped. <br>Please think again.
+                </x-modal-confirmation>
+            @else
+                <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                        stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                         stroke-linejoin="round">
-                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                        <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                        </path>
-                        <path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                        </path>
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                        <path d="M7 4v16l13 -8z" />
                     </svg>
-                    Stop
-                </x-slot:button-title>
-                This database will be stopped. <br>Please think again.
-            </x-modal-confirmation>
-        @else
-            <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
-                    stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                    <path d="M7 4v16l13 -8z" />
-                </svg>
-                Start
-            </button>
-        @endif
-        @script
-            <script>
-                $wire.$on('startEvent', () => {
-                    window.dispatchEvent(new CustomEvent('startdatabase'));
-                    $wire.$call('start');
-                });
-                $wire.$on('stopEvent', () => {
-                    $wire.$dispatch('info', 'Stopping database.');
-                    $wire.$call('stop');
-                });
-            </script>
-        @endscript
+                    Start
+                </button>
+            @endif
+            @script
+                <script>
+                    $wire.$on('startEvent', () => {
+                        window.dispatchEvent(new CustomEvent('startdatabase'));
+                        $wire.$call('start');
+                    });
+                    $wire.$on('stopEvent', () => {
+                        $wire.$dispatch('info', 'Stopping database.');
+                        $wire.$call('stop');
+                    });
+                </script>
+            @endscript
+        </div>
     </div>
 </nav>
diff --git a/resources/views/livewire/project/service/navbar.blade.php b/resources/views/livewire/project/service/navbar.blade.php
index 817efd2d7..1821396fd 100644
--- a/resources/views/livewire/project/service/navbar.blade.php
+++ b/resources/views/livewire/project/service/navbar.blade.php
@@ -9,13 +9,14 @@
     <h1>Configuration</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data>
-        <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
-            href="{{ route('project.service.configuration', $parameters) }}">
-            <button>Configuration</button>
-        </a>
-        <x-services.links :service="$service" />
-        <div class="flex-1"></div>
-        <div class="flex gap-2">
+        <nav class="flex gap-4 overflow-x-scroll items-center">
+            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
+                href="{{ route('project.service.configuration', $parameters) }}">
+                <button>Configuration</button>
+            </a>
+            <x-services.links :service="$service" />
+        </nav>
+        <div class="flex gap-2 order-first sm:order-last">
             @if (str($service->status())->contains('running'))
                 <button @click="$wire.dispatch('restartEvent')" class="gap-2 button">
                     <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">