diff --git a/frontend/src/components/IconSideNav.jsx b/frontend/src/components/IconSideNav.jsx
index a6e7f79..c87219c 100644
--- a/frontend/src/components/IconSideNav.jsx
+++ b/frontend/src/components/IconSideNav.jsx
@@ -1,5 +1,6 @@
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
+import { Link, useNavigate } from "react-router-dom";
import homeLogo from "../assets/home.png";
import calendarLogo from "../assets/calendar.png";
import planLogo from "../assets/planning.png";
@@ -7,11 +8,11 @@ import pieLogo from "../assets/pie-chart.png";
import plusLogo from "../assets/plus.png";
const menuItems = [
- { id: 0, icon: , logo: homeLogo },
- { id: 1, icon: , logo: calendarLogo },
- { id: 2, icon: , logo: planLogo },
- { id: 3, icon: , logo: pieLogo },
- { id: 4, icon: , logo: plusLogo },
+ { id: 0, path: "/", icon: , logo: homeLogo },
+ { id: 1, path: "/tasks", icon: , logo: planLogo },
+ { id: 2, path: "/calendar", icon: , logo: calendarLogo },
+ { id: 3, path: "/pie", icon: , logo: pieLogo },
+ { id: 4, path: "/plus", icon: , logo: plusLogo },
];
const IconSideNav = () => {
@@ -35,17 +36,23 @@ const SideNav = () => {
id={item.id}
setSelected={setSelected}
logo={item.logo}
+ path={item.path}
/>
))}
);
};
-const NavItem = ({ icon, selected, id, setSelected, logo }) => {
+const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
+ const navigate = useNavigate();
+
return (
setSelected(id)}
+ onClick={() => {
+ setSelected(id);
+ navigate(path);
+ }}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
@@ -67,4 +74,4 @@ const NavItem = ({ icon, selected, id, setSelected, logo }) => {
);
};
-export default IconSideNav;
\ No newline at end of file
+export default IconSideNav;