new sidebar for account/settings

client/src/components/Sidebar/Sidebar.jsx

@@ -7,6 +7,8 @@ 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 } from "react";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
@@ -18,7 +20,7 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
   const { toggleColorMode } = useColorMode();
 
     // this list of btns will come from the db (not every usr will have access to admin)
-  const buttons = [
+  let buttons = [
     {icon: FaHome, name: "Home", view: "mydashboard"},
     {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
     {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
@@ -26,6 +28,14 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
     {icon: HiUsers, name: "Admin", view: "admin"}
   ];
 
+  // Different Sidebar Button Options for Settings View
+  if (view === "settings" || view === "personal" || view === "security") {
+    buttons = [
+      {icon: IoPersonCircleSharp, name: "Personal Info", view: "personal"},
+      {icon: MdOutlineSecurity, name: "Security", view: "security"},
+    ]
+  };
+
   const toggleSidebar = () => {
     if (isOpen) setIsOpen(false);
     else setIsOpen(true);
@@ -79,12 +89,12 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
               <Icon />
               <span
                 style={{
-                opacity: isOpen ? 1 : 0,
-                transition: "opacity 0.4s ease",
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                display: "inline-block",
-                lineHeight: 1.2            
+                  opacity: isOpen ? 1 : 0,
+                  transition: "opacity 0.4s ease",
+                  overflow: "hidden",
+                  whiteSpace: "nowrap",
+                  display: "inline-block",
+                  lineHeight: 1.2            
                 }}
               >
                 {button.name}
@@ -94,11 +104,10 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
         )
       })}
       <ColorModeButton 
-        onClick={
-          () => {
-            setDarkMode(!darkMode);
-            toggleColorMode();
-          }}
+        onClick={() => {
+          setDarkMode(!darkMode);
+          toggleColorMode();
+        }}
         position="absolute" 
         bottom="2"
       />