React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

made the settings responsive via a dropdown menu

Browse source
This commit is contained in:
sageTheDM 2024-10-08 17:27:30 +02:00
parent dd0502d486
commit 4b21fe04f3
3 changed files with 63 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

69
app/components/settings/Settings.tsx
View file

@ -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;