diff --git a/client/src/components/Sidebar.jsx b/client/src/components/Sidebar.jsx
index 80d0604..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,42 +44,48 @@ export const MapMarker = createIcon({
export const Users = createIcon({
displayName: "Users",
viewBox: "0 0 24 24",
- fill: "none",
+ fill: "currentColor",
path: (
<>
-
-
-
-
-
-
+
+
+
+
+
+
),
});
export default function Sidebar() {
const [isOpen, setIsOpen] = useState(true);
- const [hasFinishedClosing, setHasFinishedClosing] = 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" });
const styles = recipe();
const toggleSidebar = () => {
- if (isOpen) {
- setHasFinishedClosing(false);
- setTimeout(() => setIsOpen(false), 10); // Kick off transition
- setTimeout(() => setHasFinishedClosing(true), 400); // Match sidebar transition duration
- } else {
- setIsOpen(true);
- setHasFinishedClosing(true);
- }
+ setFinishedTransitions(false);
+ if (isOpen) setIsOpen(false);
+ else setIsOpen(true);
+ 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