From 8eac7c209aea87d8b075b1bb561d75887225b2c3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Mon, 21 Oct 2024 14:22:07 +0200
Subject: [PATCH] Refactor server resources view to use flexbox for sidebar
 layout

---
 .../views/components/server/sidebar.blade.php | 28 +++++++++----------
 .../security/private-key/create.blade.php     |  9 +++---
 .../proxy/dynamic-configurations.blade.php    |  2 +-
 .../livewire/server/proxy/logs.blade.php      |  2 +-
 .../livewire/server/proxy/show.blade.php      |  4 +--
 5 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/resources/views/components/server/sidebar.blade.php b/resources/views/components/server/sidebar.blade.php
index 866187ffc..9f47fde7f 100644
--- a/resources/views/components/server/sidebar.blade.php
+++ b/resources/views/components/server/sidebar.blade.php
@@ -1,18 +1,16 @@
 @if ($server->proxySet())
-    <div class="flex h-full pr-4">
-        <div class="flex flex-col w-48 gap-4 min-w-fit">
-            <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.proxy', $parameters) }}">
-                <button>Configuration</button>
-            </a>
-            <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
-                <button>Dynamic Configurations</button>
-            </a>
-            <a class="{{ request()->routeIs('server.proxy.logs') ? 'dark:text-white' : '' }}"
-                href="{{ route('server.proxy.logs', $parameters) }}">
-                <button>Logs</button>
-            </a>
-        </div>
+    <div class="flex flex-col items-start gap-2 min-w-fit">
+        <a class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
+            href="{{ route('server.proxy', $parameters) }}">
+            <button>Configuration</button>
+        </a>
+        <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'menu-item menu-item-active' : 'menu-item' }}"
+            href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
+            <button>Dynamic Configurations</button>
+        </a>
+        <a class="{{ request()->routeIs('server.proxy.logs') ? 'menu-item menu-item-active' : 'menu-item' }}"
+            href="{{ route('server.proxy.logs', $parameters) }}">
+            <button>Logs</button>
+        </a>
     </div>
 @endif
diff --git a/resources/views/livewire/security/private-key/create.blade.php b/resources/views/livewire/security/private-key/create.blade.php
index e45974b22..132c0e9ad 100644
--- a/resources/views/livewire/security/private-key/create.blade.php
+++ b/resources/views/livewire/security/private-key/create.blade.php
@@ -1,10 +1,11 @@
 <div>
     <div class="pb-0 subtitle">
-    <div >Private Keys are used to connect to your servers without passwords.</div>
-    <div class="font-bold">You should not use passphrase protected keys.</div>
+        <div>Private Keys are used to connect to your servers without passwords.</div>
+        <div class="font-bold">You should not use passphrase protected keys.</div>
     </div>
-    <div class="flex gap-2 mb-4">
-        <x-forms.button wire:click="generateNewEDKey">Generate new ED25519 SSH Key (Recommended, fastest and most secure)</x-forms.button>
+    <div class="flex gap-2 mb-4 w-full">
+        <x-forms.button wire:click="generateNewEDKey" isHighlighted class="w-full">Generate new ED25519 SSH
+            Key</x-forms.button>
         <x-forms.button wire:click="generateNewRSAKey">Generate new RSA SSH Key</x-forms.button>
     </div>
     <form class="flex flex-col gap-2" wire:submit='createPrivateKey'>
diff --git a/resources/views/livewire/server/proxy/dynamic-configurations.blade.php b/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
index a8192cdb1..42967efca 100644
--- a/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
+++ b/resources/views/livewire/server/proxy/dynamic-configurations.blade.php
@@ -3,7 +3,7 @@
         Proxy Dynamic Configuration | Coolify
     </x-slot>
     <x-server.navbar :server="$server" :parameters="$parameters" />
-    <div class="flex gap-2">
+    <div class="flex flex-col h-full gap-8 sm:flex-row">
         <x-server.sidebar :server="$server" :parameters="$parameters" />
         <div class="w-full">
             @if ($server->isFunctional())
diff --git a/resources/views/livewire/server/proxy/logs.blade.php b/resources/views/livewire/server/proxy/logs.blade.php
index d5dc488d4..f0c1ea85c 100644
--- a/resources/views/livewire/server/proxy/logs.blade.php
+++ b/resources/views/livewire/server/proxy/logs.blade.php
@@ -3,7 +3,7 @@
         Proxy Logs | Coolify
     </x-slot>
     <x-server.navbar :server="$server" :parameters="$parameters" />
-    <div class="flex gap-2">
+    <div class="flex flex-col h-full gap-8 sm:flex-row">
         <x-server.sidebar :server="$server" :parameters="$parameters" />
         <div class="w-full">
             <h2 class="pb-4">Logs</h2>
diff --git a/resources/views/livewire/server/proxy/show.blade.php b/resources/views/livewire/server/proxy/show.blade.php
index 381e7f858..2d8d4e42a 100644
--- a/resources/views/livewire/server/proxy/show.blade.php
+++ b/resources/views/livewire/server/proxy/show.blade.php
@@ -4,13 +4,13 @@
     </x-slot>
     <x-server.navbar :server="$server" :parameters="$parameters" />
     @if ($server->isFunctional())
-        <div class="flex gap-2">
+        <div class="flex flex-col h-full gap-8 sm:flex-row">
             <x-server.sidebar :server="$server" :parameters="$parameters" />
             <div class="w-full">
                 <livewire:server.proxy :server="$server" />
             </div>
         </div>
-        @else
+    @else
         <div>Server is not validated. Validate first.</div>
     @endif
 </div>