dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ADD: Started on Quick Settings

Browse Source
This commit is contained in:
EvanLin3141
2025-02-08 00:57:17 +00:00
parent f0754c5549
commit ae623eee0d
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/Layout/Navbar.tsx
View File

@@ -35,10 +35,15 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
});
};
const handleQuickSettings = () => {
setShowQuickSettings(!showQuickSettings);
};
const handleSideBar = () => {
setShowSideBar(!showSideBar);
};
return (
<div
id="navbar"
@@ -89,16 +94,17 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
)}
<Button
extraClasses="absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap"
onClick={() => console.log("Settings - TODO")}
extraClasses={`absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[9999]`}
onClick={() => handleQuickSettings()}
>
<SettingsIcon className="h-15 w-15 mr-1 " />
Quick Settings
</Button>
<div
className={`fix top-0 right-0 w-250px h-screen overflow-y-auto scrollbar-hide transition-opacity duration-500 ease-in-out ${showQuickSettings ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"}`
}
className={`fixed top-0 right-0 w-[250px] h-screen bg-[var(--sideBar-LightBG)] text-[var(--sideBar-LightText)] z-[90] overflow-y-auto scrollbar-hide
transition-transform transition-opacity duration-500 ease-in-out ${showQuickSettings? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
}`}
>
<QuickSettings />
</div>