some routes added

client/src/components/Sidebar/Sidebar.jsx

@@ -1,89 +1,61 @@
 import { useSlotRecipe, Box, Button, IconButton } from "@chakra-ui/react";
 import { ColorModeButton, useColorMode } from "@/components/ui/color-mode";
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
 import Tooltip from "../Canvas/CanvasComponents/Tooltip.jsx";
-import { FaVolcano } from "react-icons/fa6";
-import { FaHome } from "react-icons/fa";
-import { FaGlobeAmericas } from "react-icons/fa";
-import { FaMapMarkerAlt } from "react-icons/fa";
-import { HiUsers } from "react-icons/hi2";
-import { VscThreeBars } from "react-icons/vsc";
-import { MdOutlineSecurity } from "react-icons/md";
-import { IoPersonCircleSharp } from "react-icons/io5";
-import { useState, useEffect, useMemo } from "react";
-import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
-import { KeyRound } from 'lucide-react';
+import { Mountain, House, Earth, MapPin, ShieldUser, Menu, CircleUserRound, KeyRound } from 'lucide-react';
 
-export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
+export default function Sidebar() {
+  const { toggleColorMode } = useColorMode();
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
-  const { toggleColorMode } = useColorMode();
 
-  const buttons = useMemo(() => {
-    if (["settings", "personal", "security"].includes(view)) {
-      return [
-        {icon: IoPersonCircleSharp, name: "Personal Info", view: "personal"},
-        {icon: KeyRound, name: "Security", view: "security"},
-      ];
-    }
-    return [
-      {icon: FaHome, name: "Home", view: "mydashboard"},
-      {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
-      {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
-      {icon: FaVolcano, name: "Volcano", view: "volcanohome"},
-      {icon: HiUsers, name: "Admin", view: "medataentry"}
-    ];
-  }, [view]);
+  // 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]);
+
+  const buttons = [
+    {icon: House, name: "Home", url: "/home"},
+    {icon: Earth, name: "Global Map", url: "/GlobalMap"},
+    {icon: MapPin, name: "Regional Map", url: "/regional-map"},
+    {icon: Mountain, name: "Volcano", url: "/volcano"},
+    {icon: ShieldUser, name: "Admin", url: "/medataentry"}
+  ];
 
   const toggleSidebar = () => {
     if (isOpen) setIsOpen(false);
     else setIsOpen(true);
   };
 
-  // Track currrent view from both Sidebar and Canvas when 'view' changes
-  useEffect(() => {
-    console.log("Current view = ", view);
-    const newIndex = buttons.findIndex((btn) => {
-      if (btn.view === "mydashboard") {
-        return DASHBOARD_VIEWS.includes(view);
-      }
-      return btn.view === view;
-    });
-    if (newIndex !== -1 ) {
-      setActiveButton(newIndex);
-    }
-  }, [view]);
-
   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"
-      >
-        <VscThreeBars />
+    <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">
+        <Menu />
       </IconButton>
 
       {buttons.map((button, idx) => {
         const Icon = button.icon;
         return (
-          <Tooltip key={button.name} tooltipkeykey={idx} content={button.name} sidebarIsOpen={isOpen}>
-            <Button 
+          <Tooltip key={button.name} tooltipkey={idx} content={button.name} sidebarIsOpen={isOpen}>
+            <Button
+              as={NavLink}
+              to={button.url}
               key={button.name} 
-              css={styles.buttons} 
-              onClick={() => {
-                onChangeView(button.view); // Trigger state change in Dashboard
-              }} 
-              bg={activeButton === idx ? "primary":undefined} 
-              color={activeButton === idx ? "#FFFFFF":undefined} 
+              css={styles.buttons}
               justifyContent="flex-start"
             >           
               <Icon />
@@ -105,7 +77,6 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
       })}
       <ColorModeButton 
         onClick={() => {
-          setDarkMode(!darkMode);
           toggleColorMode();
         }}
         position="absolute"