TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Router to sidebar

Browse Source
This commit is contained in:
sosokker 2023-11-10 19:49:00 +07:00
parent 79186766dc
commit 0ee5e64394
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/IconSideNav.jsx
View File

@ -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;
export default IconSideNav;