Update sidebar changes made for function and look. removed some extras

client/src/components/Sidebar/Sidebar.jsx

@@ -1,82 +1,73 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
-import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
+import { ColorModeButton } from "@/components/ui/color-mode";
 import { useState } from "react";
 import { NavLink } from "react-router-dom";
 import Tooltip from "../Canvas/CanvasComponents/Tooltip.jsx";
-import { Mountain, House, Earth, MapPin, ShieldUser, Menu, CircleUserRound, KeyRound } from 'lucide-react';
+import { Mountain, House, Earth, MapPin, ShieldUser, Menu } 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
+];
 
 export default function Sidebar() {
-  const { toggleColorMode } = useColorMode();
   const [isOpen, setIsOpen] = useState(true);
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
-  // const buttons = useMemo(() => {
-  //   if (["settings", "personal", "security"].includes(view)) {
-  //     return [
-  //       {icon: CircleUserRound, name: "Personal Info", url: "/personal"},
-  //       {icon: KeyRound, name: "Security", url: "/security"},
-  //     ];
-  //   }
-  //   return [
-  //     {icon: House, name: "Home", url: "/mydashboard"},
-  //     {icon: Earth, name: "Global Map", url: "/global"},
-  //     {icon: MapPin, name: "Regional Map", url: "/regional"},
-  //     {icon: Mountain, name: "Volcano", url: "/volcanohome"},
-  //     {icon: ShieldUser, name: "Admin", url: "/medataentry"}
-  //   ];
-  // }, [view]);
+  // 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;
 
-  const 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"}
-  ];
-
-  const toggleSidebar = () => {
-    setIsOpen((prev) => !prev);
-  };
+  const toggleSidebar = () => setIsOpen((prev) => !prev);
 
   return (
-    <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative">
-      <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px">
+      <Box css={styles.root} width={isOpen ? "210px" : "71px"} transition="width 0.4s ease" position="relative" display="flex" flexDirection="column" gap={2}
+      >
+        {/* Menu Trigger */}
+        <IconButton aria-label="Toggle Sidebar" variant="plain" size="md" onClick={toggleSidebar} width="54px" alignSelf="flex-start"
+        >
           <Menu />
         </IconButton>
 
-      {buttons.map((button, idx) => {
+        {/* Navigation Buttons */}
+        {visibleButtons.map((button) => {
           const Icon = button.icon;
-        return ( // TODO: don't use idx as a key
-          <Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}>
+          return (
+              <Tooltip key={button.name} content={button.name} sidebarIsOpen={isOpen}>
                 <Button
                     as={NavLink}
                     to={button.url}
-              key={button.name} 
                     css={styles.buttons}
                     justifyContent="flex-start"
+                    width="100%"
+                    overflow="hidden" // Prevents text popout on collapse
                 >
-              <Icon />
-              <span
-                style={{
-                  opacity: isOpen ? 1 : 0,
-                  transition: "opacity 0.4s ease",
-                  overflow: "hidden",
-                  whiteSpace: "nowrap",
-                  display: "inline-block",
-                  lineHeight: 1.2            
-                }}
+                  <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}
-              </span>
+                  </Box>
                 </Button>
               </Tooltip>
-        )
+          );
         })}
+
+        {/* Theme Toggler */}
         <ColorModeButton
-        onClick={() => toggleColorMode()}
             position="absolute"
-        bottom="2"
+            bottom="4"
+            left="4"
         />
       </Box>
   );