From 323590726636b13a17c782a71499d12d2abffc2d Mon Sep 17 00:00:00 2001
From: Francesco Bruno <59353843+FrancescoBrunoDev@users.noreply.github.com>
Date: Sun, 5 May 2024 17:18:48 +0000
Subject: [PATCH] Refactor settings page layout for better responsiveness

---
 .../views/livewire/settings/index.blade.php     | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/resources/views/livewire/settings/index.blade.php b/resources/views/livewire/settings/index.blade.php
index 5ab89413d..1e8c23814 100644
--- a/resources/views/livewire/settings/index.blade.php
+++ b/resources/views/livewire/settings/index.blade.php
@@ -1,18 +1,19 @@
 <div>
     <x-settings.navbar />
-    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1">
-        <div class="flex flex-col gap-4 min-w-fit">
-            <a :class="activeTab === 'general' && 'dark:text-white'"
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1 gap-8 sm:flex-row flex-col">
+        <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
+            <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
-            <a :class="activeTab === 'backup' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'backup' && 'menu-item-active'"
                 @click.prevent="activeTab = 'backup'; window.location.hash = 'backup'" href="#">Instance Backup</a>
-            <a :class="activeTab === 'smtp' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'smtp' && 'menu-item-active'"
                 @click.prevent="activeTab = 'smtp'; window.location.hash = 'smtp'" href="#">Transactional
                 Email</a>
-            <a :class="activeTab === 'auth' && 'dark:text-white'"
-                @click.prevent="activeTab = 'auth'; window.location.hash = 'auth'" href="#">Authentication (OAuth)</a>
+            <a class="menu-item" :class="activeTab === 'auth' && 'menu-item-active'"
+                @click.prevent="activeTab = 'auth'; window.location.hash = 'auth'" href="#">Authentication
+                (OAuth)</a>
         </div>
-        <div class="w-full pl-8">
+        <div class="w-full">
             <div x-cloak x-show="activeTab === 'general'" class="h-full">
                 <livewire:settings.configuration :settings="$settings" />
             </div>