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

ADD: Color Now Modifiable for Dark/Light Mode

Browse Source
This commit is contained in:
EvanLin3141
2025-02-05 13:18:18 +00:00
parent a6bbf696f4
commit edb690728c
6 changed files with 159 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Layout/Sidebar.tsx
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react";
import "../../assets/styles/sidebar.css"
interface SideBarProps {
extraClasses?: string;
@@ -6,6 +7,7 @@ interface SideBarProps {
}
const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
const [thisTheme, setThisTheme] = useState(false);
const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
useEffect(() => {
@@ -19,7 +21,7 @@ const Sidebar: React.FC<SideBarProps> = ( {scrollActiveSideBar}) => {
};
}, [isCursorOnSidebar]);
return <div id="sidebar" className={"fixed top-0 left-0 w-[250px] bg-blue-400 text-white p-4 z-[90] h-screen overflow-y-auto scrollbar-hide"}
return <div id="sidebar" className={"fixed top-0 left-0 bg-[var(--sideNav-LightBG)] w-[250px] text-sideBar-text p-4 z-[90] h-screen overflow-y-auto scrollbar-hide"}
onMouseEnter={() => setIsCursorOnSidebar(true)}
onMouseLeave={() => setIsCursorOnSidebar(false)}
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>