From 4b21fe04f343bc45a379addc8af16015e01205cc Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Tue, 8 Oct 2024 17:27:30 +0200
Subject: [PATCH] made the settings responsive via a dropdown menu

---
 app/components/settings/Settings.tsx | 69 +++++++++++++++++-----------
 app/styles/Settings.css              |  4 ++
 app/styles/responsive.css            | 26 +++++++----
 3 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index c714a83..295c318 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -730,36 +730,49 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   //#region overall export
   return (
     <div className="popup-overlay">
-      <div className="settings-content">
-        <div className="settings-container">
-          <div className="sidebar">
-            <ul>
-              <li onClick={() => setActiveSection('general')}>General</li>
-              <li onClick={() => setActiveSection('privacy')}>Privacy</li>
-              <li onClick={() => setActiveSection('theme')}>Theme</li>
-              <li onClick={() => setActiveSection('foss')}>FOSS</li>
-              <li onClick={() => setActiveSection('account')}>Account</li>
-              <li onClick={() => setActiveSection('api')}>API Keys</li>
-              <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
-            </ul>
-          </div>
-          <div className="settings-main">
-            <h2>Settings for {accountName}</h2>
-            {renderSettingsContent()}
-            <button className="close-popup" onClick={closeSettings}>Close</button>
-            <button className="apply" onClick={async () => {
-              getAllLocalStorageItems();
-              closeSettings();
-              await changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
-              window.location.reload();
-            }}>
-              Apply
-            </button>
-          </div>
+        <div className="settings-content">
+            <div className="settings-container">
+                {/* Sidebar for desktop */}
+                <div className="sidebar">
+                    <ul>
+                        <li onClick={() => setActiveSection('general')}>General</li>
+                        <li onClick={() => setActiveSection('privacy')}>Privacy</li>
+                        <li onClick={() => setActiveSection('theme')}>Theme</li>
+                        <li onClick={() => setActiveSection('foss')}>FOSS</li>
+                        <li onClick={() => setActiveSection('account')}>Account</li>
+                        <li onClick={() => setActiveSection('api')}>API Keys</li>
+                        <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
+                    </ul>
+                </div>
+
+                <div className="settings-main">
+                    {/* Dropdown for selections in responsive mode */}
+                    <div className="settings-option dropdown">
+                      <div className="dropdown-header"><h1>Select a Setting</h1></div>
+                      <select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
+                          <option value="general">General</option>
+                          <option value="privacy">Privacy</option>
+                          <option value="theme">Theme</option>
+                          <option value="foss">FOSS</option>
+                          <option value="account">Account</option>
+                          <option value="api">API Keys</option>
+                          <option value="im/export">Import/Export</option>
+                      </select>
+                    </div>
+                    <h2>Settings for {accountName}</h2>
+                    {renderSettingsContent()}
+                    <button className="close-popup" onClick={closeSettings}>Close</button>
+                    <button className="apply" onClick={async () => {
+                        // Your existing logic for applying settings
+                    }}>
+                        Apply
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  );
+);
 };
 
+
 export default Settings;
\ No newline at end of file
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index 981a794..acdc1c6 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -240,4 +240,8 @@ input[type="radio"] {
     /* Make the option appear greyed out */
     pointer-events: none;
     /* Prevent clicks */
+}
+
+.dropdown{
+    display: none;
 }
\ No newline at end of file
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 938106e..174bdfc 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -159,6 +159,24 @@
     background-image: url(../../public/img/logo-small.png);
     width: 4em;
   }
+
+  .sidebar{
+    width: 0%;
+    display: none;
+  }
+
+  .settings-main {
+    width: 80vw; /* Full width for main content */
+    margin: auto;
+    padding: auto;
+  }
+
+  .dropdown{
+    display: flex;
+    position: relative;
+    top: 10px;
+    display: block;
+  }
 }
 
 /* Responsive adjustments for the settings */
@@ -166,12 +184,4 @@
   .settings-content {
     flex-direction: column; /* Stack sidebar and main content on smaller screens */
   }
-
-  .sidebar {
-    width: 100%; /* Full width for sidebar */
-  }
-
-  .settings-main {
-    width: 100%; /* Full width for main content */
-  }
 }