made the settings responsive via a dropdown menu

app/components/settings/Settings.tsx

@@ -732,6 +732,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     <div className="popup-overlay">
         <div className="settings-content">
             <div className="settings-container">
+                {/* Sidebar for desktop */}
                 <div className="sidebar">
                     <ul>
                         <li onClick={() => setActiveSection('general')}>General</li>
@@ -743,15 +744,26 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                         <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 () => {
-              getAllLocalStorageItems();
-              closeSettings();
-              await changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
-              window.location.reload();
+                        // Your existing logic for applying settings
                     }}>
                         Apply
                     </button>
@@ -759,7 +771,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             </div>
         </div>
     </div>
-  );
+);
 };
 
+
 export default Settings;

app/styles/Settings.css

@@ -241,3 +241,7 @@ input[type="radio"] {
     pointer-events: none;
     /* Prevent clicks */
 }
+
+.dropdown{
+    display: none;
+}

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 */
-  }
 }