chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added hover & active w/ dark mode

Browse Source 
dark mode works with buttons in hover, active, and inactive state! (and its not totally ugly!)
This commit is contained in:
vkuchenik
2025-07-15 18:28:37 -07:00
parent 022f37b086
commit 23540bc5cd
3 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/sidebar.jsx
+6 -6
View File
@@ -60,7 +60,7 @@ export const Users = createIcon({
export default function Sidebar () {
const variant = useColorModeValue("ghost", "solid")
const [isOpen, setIsOpen] = useState(true);
const [activeButton, setActiveButton] = useState("Dashboard")
const [activeButton, setActiveButton] = useState(0)
const recipe = useSlotRecipe({ key: "sidebar" });
const styles = recipe();
@@ -69,19 +69,19 @@ export default function Sidebar () {
{isOpen ? (
<>
<CloseButton color="secondary" size="sm" _hover={{bg: "#EDF1F1"}} variant="ghost" onClick={() => setIsOpen(!isOpen)}></CloseButton>
<Button css={styles.buttons} _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} onClick={() => setActiveButton("Dashboard")} >
<Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined}>
<PushPin fill="iconFill" /> Dashboard
</Button>
<Button css={styles.buttons} _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : ""}>
<Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined}>
<Globe fill="iconFill" stroke="black" /> Global Map
</Button>
<Button css={styles.buttons} _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
<Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined}>
<MapMarker fill="iconFill" stroke="black"/> Regional Map
</Button>
<Button css={styles.buttons} _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
<Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined}>
<FaVolcano color="color"/> Volcano
</Button>
<Button css={styles.buttons} _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
<Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined}>
<Users fill="iconFill" stroke="black"/> Admin
</Button>
</>