Refactor, cleaned up sidebar and theme

client/src/components/layout/Sidebar.jsx

@@ -1,22 +1,24 @@
-import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
-import { ColorModeButton } from "@/components/ui/color-mode.jsx";
-import { useState } from "react";
-import { NavLink } from "react-router-dom";
+import {useSlotRecipe, Box, Button, IconButton} from "@chakra-ui/react";
+import {ColorModeButton} from "@/components/ui/color-mode.jsx";
+import {useState} from "react";
+import {NavLink} from "react-router-dom";
 import Tooltip from "../ui/Tooltip.jsx";
-import { Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import {Mountain, House, Earth, MapPin, ShieldUser, Menu, PanelLeftClose, PanelLeftOpen} from 'lucide-react';
 
 const SIDEBAR_DEFAULT_BUTTONS = [
-  { icon: House, name: "Home", url: "/home" },
-  { icon: Earth, name: "Global Map", url: "/global-map" },
-  { icon: MapPin, name: "Regional Map", url: "/regional-map" },
-  { icon: Mountain, name: "Volcano", url: "/volcano" },
-  { icon: ShieldUser, name: "Admin", url: "/admin" } // TODO remove in the future as default should not have admin
+  {icon: House, name: "Home", url: "/home"},
+  {icon: Earth, name: "Global Map", url: "/global-map"},
+  {icon: MapPin, name: "Regional Map", url: "/regional-map"},
+  {icon: Mountain, name: "Volcano", url: "/volcano"},
+  {icon: ShieldUser, name: "Admin", url: "/admin"} // TODO remove in the future as default should not have admin
 ];
 
 export default function Sidebar() {
+
   const [isOpen, setIsOpen] = useState(true);
-  const recipe = useSlotRecipe({ key: "sidebar" });
-  const styles = recipe();
+
+  const recipe = useSlotRecipe({key: "sidebar"});
+  const styles = recipe({state: isOpen ? "open" : "closed"});
 
   // TODO we will need to call buttons here by authorized user, for now we update the visible buttons as simply the default buttons
   const visibleButtons = SIDEBAR_DEFAULT_BUTTONS;
@@ -24,87 +26,46 @@ export default function Sidebar() {
   const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
-      <Box
-          css={styles.root}
-          width={isOpen ? "190px" : "71px"}
-          transition="width 0.4s ease"
-          position="relative"
-          display="flex"
-          flexDirection="column"
-          gap={4} // Increased gap slightly to help with the squashed look
-          pt={4} // Added top padding to give the logo room to breathe
+    <Box css={styles.root}>
+      {/* Home Link Logo */}
+      <Button
+        as={NavLink}
+        to="/home"
+        css={styles.logo}
+        variant="plain"
       >
-        {/* Home Link Logo */}
-        <Button
+        {isOpen ? "🌋 VDAP" : "🌋"}
+      </Button>
+
+
+      {/* Navigation Buttons */}
+      {visibleButtons.map((button) => {
+        const Icon = button.icon;
+        return (
+          <Button
             as={NavLink}
-            to="/home"
-            color="color"
-            variant="plain"
-            fontWeight="bold"
-            height="auto" // Prevents the large text from squashing vertically
-            overflow="hidden"
-            width="100%"
-            px={0}
-            justifyContent={isOpen ? "flex-start" : "center"} // Center the 'V' when collapsed
-            ml={isOpen ? 2 : -1} // Align with other buttons when open
-            textStyle={isOpen ? "4xl" : "3xl"} // Scale down slightly when closed
-        >
-          {isOpen ? "🌋 VDAP" : "🌋"}
-        </Button>
-
-
-
-        {/* Navigation Buttons */}
-        {visibleButtons.map((button) => {
-          const Icon = button.icon;
-          return (
-              // <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
-                <Button
-                    as={NavLink}
-                    to={button.url}
-                    css={styles.buttons}
-                    justifyContent="flex-start"
-                    width="100%"
-                    // overflow="hidden" // Prevents text popout on collapse
-                >
-                  <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
-
-                  {/* Cleaned conditional transition styling */}
-                  <Box
-                      as="span"
-                      ml={isOpen ? 3 : 0}
-                      opacity={isOpen ? 1 : 0}
-                      visibility={isOpen ? "visible" : "hidden"} // Prevents phantom width calculations and overflow into canvas
-                      transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
-                      whiteSpace="nowrap"
-                  >
-                    {button.name}
-                  </Box>
-                </Button>
-              // </Tooltip>
-          );
-        })}
-        <Box
-            mt="auto"
-            display="flex"
-            flexDirection={isOpen ? "row" : "column-reverse"}
-            justifyContent="center"
-            alignItems="center"
-            gap={isOpen ? 16 : 2}
-            pb={4}
-            pr={2}
-            transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
-        >
-          {/* Menu Trigger */}
-          <IconButton
-              aria-label="Toggle Sidebar"
-              variant="plain"
-              size="md"
-              onClick={toggleSidebar}
-              transition="opacity 0.3s ease, visibility 0.3s ease, margin 0.3s ease"
+            to={button.url}
+            css={styles.buttons}
           >
-            {isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
-          </IconButton>
+            {/* Navigation buttons are [icon text] */}
+            <Icon/>
+            <Box as="span" css={styles.button_text}>
+              {button.name}
+            </Box>
+          </Button>
+        );
+      })}
+      <Box css={styles.footer}>
+        {/* Menu Trigger */}
+        <IconButton
+          aria-label="Toggle Sidebar"
+          variant="plain"
+          size="md"
+          onClick={toggleSidebar}
+          css={styles.collapse_button}
+        >
+          {isOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
+        </IconButton>
 
           {/* Theme Toggler */}
           <ColorModeButton _hover={{ bg: "transparent" }} />