From 8697c547b84e1e51be6bac786436c826025fab4a Mon Sep 17 00:00:00 2001 From: Venessa Kuchenik Date: Thu, 17 Jul 2025 09:30:42 -0700 Subject: [PATCH] updated to loop through btns Instead of listing each button it now loops through --- client/src/components/sidebar.jsx | 187 +++++++++++------------------- client/src/theme.js | 34 +----- 2 files changed, 70 insertions(+), 151 deletions(-) diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx index 69bec08..b094f9a 100644 --- a/client/src/components/sidebar.jsx +++ b/client/src/components/sidebar.jsx @@ -11,7 +11,7 @@ export const PushPin = createIcon({ fill: "none", path: ( <> - + ), }); @@ -19,12 +19,12 @@ export const PushPin = createIcon({ export const Globe = createIcon({ displayName: "Globe", viewBox: "0 0 24 24", - fill: "none", + fill: "currentColor", path: ( <> - - - + + + ), }); @@ -35,8 +35,8 @@ export const MapMarker = createIcon({ fill: "none", path: ( <> - - + + ), }); @@ -44,15 +44,15 @@ export const MapMarker = createIcon({ export const Users = createIcon({ displayName: "Users", viewBox: "0 0 24 24", - fill: "none", + fill: "currentColor", path: ( <> - - - - - - + + + + + + ), }); @@ -60,6 +60,14 @@ export const Users = createIcon({ export default function Sidebar() { const [isOpen, setIsOpen] = useState(true); const [hasFinishedTransitions, setFinishedTransitions] = useState(false); + + const buttons = [ + {icon: PushPin, name: "Dashboard"}, + {icon: Globe, name: "Global Map"}, + {icon: MapMarker, name: "Regional Map"}, + {icon: FaVolcano, name: "Volcano"}, + {icon: Users, name: "Admin"} + ]; const [activeButton, setActiveButton] = useState(0) const recipe = useSlotRecipe({ key: "sidebar" }); @@ -72,6 +80,8 @@ export default function Sidebar() { setTimeout(() => setFinishedTransitions(true), 400); // Match sidebar transition duration }; + + return ( + + {buttons.map((button, idx) => { + const Icon = button.icon; + return ( + + ) + })} {/* Dashboard */} - + */} {/* Global Map */} - + */} {/* Regional Map */} - + */} {/* Volcano */} - + */} {/* Admin */} - + */} ); -} - -// THIS CODE WORKS, SAVE IN CASE OF EMERGENCY -// Needed to refactor in order allow transitions to work properly - -// export default function Sidebar () { -// const [isOpen, setIsOpen] = useState(true); -// const [activeButton, setActiveButton] = useState("Dashboard") - -// return ( -// <> -// {isOpen && ( -// -// {/* setIsOpen(!isOpen)}> */} -// {/* setIsOpen(!isOpen)}> */} -// -// -// -// -// -// -// -// )} - -// {!isOpen && ( -// -// setIsOpen(!isOpen)}> -// -// -// setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}> -// -// -// setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}> -// -// -// setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}> -// -// -// setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}> -// -// -// setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}> -// -// -// -// )} - -// -// ); -// } +} \ No newline at end of file diff --git a/client/src/theme.js b/client/src/theme.js index 04b6bb0..a2a4ad2 100644 --- a/client/src/theme.js +++ b/client/src/theme.js @@ -49,47 +49,21 @@ const sidebarRecipe = defineSlotRecipe({ } }); - -// const sidebarRecipe = defineRecipe({ -// base: { -// bg: "{primaryBG}", -// borderRight: "1px solid", -// borderColor: "{border}", -// width: "100%", -// height: "100%", -// display: "flex", -// flexDirection: "column", -// justifyContent: "start", -// alignItems: "start", -// gap: 2, -// p: 2, -// }, -// variants: { -// dark: { -// borderRight: "2px solid", -// } -// } -// }); - -// const sidebarBtnRecipe = defineRecipe({ -// base: { -// bg: "{sidebarBtnBG}" -// } -// }); - const config = defineConfig({ theme: { semanticTokens: { colors: { base100: { value: {base: "#f7f9fa", _dark: "#787b73"}}, - base200: { value: {base: "#eef2f6", _dark: "#484c42"}}, + base200: { value: {base: "#eef2f6", _dark: "#242424"}}, base300: { value: {base: "#dfe5ed", _dark: "#60645a"}}, primary: { value: {base: "#9cd855", _dark: "#629631"}}, primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}}, secondaryBG: { value: {base: "#EDF1F1", _dark: "#121212"}}, border: {value: {base: "#000000", _dark: "#CBCBCB"}}, text: {value: {base: "#19332D", _dark: "#CBCBCB"}}, - iconFill: { value: {base: "#FFFFFF", _dark: "#CBCBCB"}}, + iconFillPush: { value: {base: "#19332D", _dark: "#CBCBCB"}}, + iconFillAdmin: { value: {base: "#eef2f6", _dark: "#CBCBCB"}}, + iconStroke: { value: {base: "#19332D", _dark: "#CBCBCB"}}, icon: {value: {base: "#19332D", _dark: "#CBCBCB"}}, }, },