Refactor the UI for light mode is at an acceptable point

client/src/components/layout/Sidebar.jsx

@@ -3,7 +3,7 @@ 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 } 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" },
@@ -26,7 +26,7 @@ export default function Sidebar() {
   return (
       <Box
           css={styles.root}
-          width={isOpen ? "210px" : "71px"}
+          width={isOpen ? "190px" : "71px"}
           transition="width 0.4s ease"
           position="relative"
           display="flex"
@@ -51,31 +51,20 @@ export default function Sidebar() {
           {isOpen ? "🌋 VDAP" : "🌋"}
         </Button>
 
-        {/* Menu Trigger */}
-        <IconButton
-            aria-label="Toggle Sidebar"
-            variant="plain"
-            size="md"
-            onClick={toggleSidebar}
-            width="54px"
-            alignSelf={isOpen ? "flex-start" : "center"} // Center the icon when collapsed
-            ml={isOpen ? 3 : 0} // Align with other buttons when open
-        >
-          <Menu />
-        </IconButton>
+
 
         {/* Navigation Buttons */}
         {visibleButtons.map((button) => {
           const Icon = button.icon;
           return (
-              <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
+              // <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
+                    // overflow="hidden" // Prevents text popout on collapse
                 >
                   <Icon style={{ flexShrink: 0 }} /> {/* Prevents icon from squishing */}
 
@@ -91,17 +80,34 @@ export default function Sidebar() {
                     {button.name}
                   </Box>
                 </Button>
-              </Tooltip>
+              // </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"
+          >
+            {isOpen ? <PanelLeftClose style={{ flexShrink: 0 }} /> : <PanelLeftOpen style={{ flexShrink: 0 }} />}
+          </IconButton>
 
-        {/* Theme Toggler */}
-        <ColorModeButton
-            position="absolute"
-            bottom="4"
-            left={isOpen ? "4" : "50%"} // Center the toggle when collapsed
-            transform={isOpen ? "none" : "translateX(-50%)"} // Exact centering logic
-        />
+          {/* Theme Toggler */}
+          <ColorModeButton />
+        </Box>
       </Box>
   );
 }