new sidebar for account/settings

client/src/components/Canvas/Canvas.jsx

@@ -7,6 +7,8 @@ import Settings from "./views/Settings"
 import Home from "./views/Home";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 import { chakra } from "@chakra-ui/react";
+import Personal from "./views/Personal";
+import Security from "./views/Security";
 
 export default function Canvas({...props}) {
   const { view } = props;
@@ -22,6 +24,8 @@ export default function Canvas({...props}) {
             {view === "admin" && <Admin />}
             {view === "account" && <Account />}
             {view === "settings" && <Settings />}
+            {view === "personal" && <Personal />}
+            {view === "security" && <Security />}
         </chakra.div>
     );
 }

client/src/components/Canvas/views/Personal.jsx

@@ -0,0 +1,9 @@
+import { Box } from "@chakra-ui/react";
+
+export default function Personal() {
+  return (
+    <Box color="white" bg="tomato">
+      Hello World
+    </Box>
+  );
+}

client/src/components/Canvas/views/Security.jsx

@@ -0,0 +1,9 @@
+import { Box } from "@chakra-ui/react";
+
+export default function Security() {
+  return (
+    <Box color="white" bg="tomato">
+      Heya
+    </Box>
+  );
+}

client/src/components/Header/Header.jsx

@@ -14,7 +14,7 @@ export default function Header({ onChangeView }) {
 
   return (
     <chakra.div css={styles}>
-      <Button color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
+      <Button onClick={() => onChangeView("mydashboard")} color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
       <Flex align="center" gap={3} pr={6}>
         <Stack gap="0" textAlign="center" cursor="default">
           <Text color="color" fontWeight="bold" textStyle="lg">{user.name}</Text>

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,
+                  opacity: isOpen ? 1 : 0,
-                transition: "opacity 0.4s ease",
+                  transition: "opacity 0.4s ease",
-                overflow: "hidden",
+                  overflow: "hidden",
-                whiteSpace: "nowrap",
+                  whiteSpace: "nowrap",
-                display: "inline-block",
+                  display: "inline-block",
-                lineHeight: 1.2            
+                  lineHeight: 1.2            
                 }}
               >
                 {button.name}
@@ -94,11 +104,10 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
         )
       })}
       <ColorModeButton 
-        onClick={
+        onClick={() => {
-          () => {
+          setDarkMode(!darkMode);
-            setDarkMode(!darkMode);
+          toggleColorMode();
-            toggleColorMode();
+        }}
-          }}
         position="absolute" 
         bottom="2"
       />