some routes added

client/src/components/Header/Header.jsx

@@ -1,5 +1,7 @@
-import { chakra, useRecipe, Box, Button, Stack, Text, Flex } from "@chakra-ui/react"
+import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
+import { useNavigate } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 
 //TODO: Dynamically populate per each user
 const user = {
@@ -8,13 +10,16 @@ const user = {
   // avatar: "src\\assets\\user_profile.svg"
 }
 
-export default function Header({ onChangeView }) {
+export default function Header() {
+  const navigate = useNavigate();
   const recipe = useRecipe({ key: "header" });
   const styles = recipe();
 
   return (
-    <chakra.div css={styles}>
-      <Button onClick={() => onChangeView("mydashboard")} color="color" variant="plain" textStyle="5xl" fontWeight="bold">VDAP</Button>
+    <Flex css={styles}>
+      <Button as={NavLink} to={"/home"} 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>
@@ -23,10 +28,9 @@ export default function Header({ onChangeView }) {
         <UserAvatarMenu 
           name={user.name} 
           avatar={user.avatar} 
-          onChangeView={ onChangeView }
         />
       </Flex>
-    </chakra.div>
+    </Flex>
   );
 }