diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
new file mode 100644
index 0000000..7e9261e
--- /dev/null
+++ b/client/src/components/Header.jsx
@@ -0,0 +1,41 @@
+import { chakra, useRecipe, Box, Button, Avatar, Stack, Text, Menu, Portal } from "@chakra-ui/react"
+
+export default function Header() {
+ const recipe = useRecipe({ key: "header" });
+ const styles = recipe();
+
+ return (
+
+
+
+ {user.name}
+ {user.email}
+
+ {/* Add a drop down menu to the avatar */}
+
+
+
+
+
+
+
+
+
+
+ Account
+ Settings
+ Logout
+
+
+
+
+ {/* End drop down menu */}
+
+ );
+}
+
+const user = {
+ name: "venessa kuchenik",
+ email: "vkuchenik@contractor.usgs.gov",
+ // avatar: "src\\assets\\user_profile.svg"
+}
\ No newline at end of file
diff --git a/client/src/components/Sidebar.jsx b/client/src/components/Sidebar.jsx
new file mode 100644
index 0000000..80d0604
--- /dev/null
+++ b/client/src/components/Sidebar.jsx
@@ -0,0 +1,334 @@
+import { chakra, useRecipe, useSlotRecipe, Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
+import { ColorModeButton } from "@/components/ui/color-mode";
+import { FaVolcano } from "react-icons/fa6";
+import { RxHamburgerMenu } from "react-icons/rx";
+import { useState } from "react";
+
+// ICONS
+export const PushPin = createIcon({
+ displayName: "PushPin",
+ viewBox: "0 0 24 24",
+ fill: "none",
+ path: (
+ <>
+
+
+ ),
+});
+
+export const Globe = createIcon({
+ displayName: "Globe",
+ viewBox: "0 0 24 24",
+ fill: "none",
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+export const MapMarker = createIcon({
+ displayName: "MapMarker",
+ viewBox: "0 0 24 24",
+ fill: "none",
+ path: (
+ <>
+
+
+
+ ),
+});
+
+export const Users = createIcon({
+ displayName: "Users",
+ viewBox: "0 0 24 24",
+ fill: "none",
+ path: (
+ <>
+
+
+
+
+
+
+
+ ),
+});
+
+export default function Sidebar() {
+ const [isOpen, setIsOpen] = useState(true);
+ const [hasFinishedClosing, setHasFinishedClosing] = useState(true);
+
+ 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);
+ }
+ };
+
+ 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"}>
+//
+//
+//
+// )}
+
+//
+// );
+// }