From 0ee5e64394657114908ad0e64d23808913b96bfc Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Fri, 10 Nov 2023 19:49:00 +0700
Subject: [PATCH] Add Router to sidebar

---
 frontend/src/components/IconSideNav.jsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

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: <homeLogo />, logo: homeLogo },
-  { id: 1, icon: <calendarLogo />, logo: calendarLogo },
-  { id: 2, icon: <planLogo />, logo: planLogo },
-  { id: 3, icon: <pieLogo />, logo: pieLogo },
-  { id: 4, icon: <plusLogo />, logo: plusLogo },
+  { id: 0, path: "/", icon: <homeLogo />, logo: homeLogo },
+  { id: 1, path: "/tasks", icon: <planLogo />, logo: planLogo },
+  { id: 2, path: "/calendar", icon: <calendarLogo />, logo: calendarLogo },
+  { id: 3, path: "/pie", icon: <pieLogo />, logo: pieLogo },
+  { id: 4, path: "/plus", icon: <plusLogo />, logo: plusLogo },
 ];
 
 const IconSideNav = () => {
@@ -35,17 +36,23 @@ const SideNav = () => {
           id={item.id}
           setSelected={setSelected}
           logo={item.logo}
+          path={item.path}
         />
       ))}
     </nav>
   );
 };
 
-const NavItem = ({ icon, selected, id, setSelected, logo }) => {
+const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
+  const navigate = useNavigate();
+
   return (
     <motion.button
       className="p-3 text-xl bg-slate-800 hover-bg-slate-700 rounded-md transition-colors relative"
-      onClick={() => 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;