From 6a6bbf18668d9c85611e2a182edadf8fb1bae4cf Mon Sep 17 00:00:00 2001 From: "Daniel S. Hansen" Date: Wed, 16 Jul 2025 15:02:57 -0700 Subject: [PATCH] Rename component files Sidebar.jsx and Header.jsx with correct casing --- client/src/components/Header.jsx | 41 ++++ client/src/components/Sidebar.jsx | 334 ++++++++++++++++++++++++++++++ 2 files changed, 375 insertions(+) create mode 100644 client/src/components/Header.jsx create mode 100644 client/src/components/Sidebar.jsx 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"}> +// +// +// +// )} + +// +// ); +// }