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"}},
},
},