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

20
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 = () => { const handleSideBar = () => {
setShowSideBar(!showSideBar); setShowSideBar(!showSideBar);
}; };
return ( return (
<div <div
id="navbar" id="navbar"
@@ -89,17 +94,18 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
)} )}
<Button <Button
extraClasses="absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap" extraClasses={`absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[9999]`}
onClick={() => console.log("Settings - TODO")} onClick={() => handleQuickSettings()}
> >
<SettingsIcon className="h-15 w-15 mr-1" /> <SettingsIcon className="h-15 w-15 mr-1 " />
Quick Settings Quick Settings
</Button> </Button>
<div <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 /> <QuickSettings />
</div> </div>