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 { useState } from "react";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { Link, useNavigate } from "react-router-dom";
import homeLogo from "../assets/home.png"; import homeLogo from "../assets/home.png";
import calendarLogo from "../assets/calendar.png"; import calendarLogo from "../assets/calendar.png";
import planLogo from "../assets/planning.png"; import planLogo from "../assets/planning.png";
@ -7,11 +8,11 @@ import pieLogo from "../assets/pie-chart.png";
import plusLogo from "../assets/plus.png"; import plusLogo from "../assets/plus.png";
const menuItems = [ const menuItems = [
{ id: 0, icon: <homeLogo />, logo: homeLogo }, { id: 0, path: "/", icon: <homeLogo />, logo: homeLogo },
{ id: 1, icon: <calendarLogo />, logo: calendarLogo }, { id: 1, path: "/tasks", icon: <planLogo />, logo: planLogo },
{ id: 2, icon: <planLogo />, logo: planLogo }, { id: 2, path: "/calendar", icon: <calendarLogo />, logo: calendarLogo },
{ id: 3, icon: <pieLogo />, logo: pieLogo }, { id: 3, path: "/pie", icon: <pieLogo />, logo: pieLogo },
{ id: 4, icon: <plusLogo />, logo: plusLogo }, { id: 4, path: "/plus", icon: <plusLogo />, logo: plusLogo },
]; ];
const IconSideNav = () => { const IconSideNav = () => {
@ -35,17 +36,23 @@ const SideNav = () => {
id={item.id} id={item.id}
setSelected={setSelected} setSelected={setSelected}
logo={item.logo} logo={item.logo}
path={item.path}
/> />
))} ))}
</nav> </nav>
); );
}; };
const NavItem = ({ icon, selected, id, setSelected, logo }) => { const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
const navigate = useNavigate();
return ( return (
<motion.button <motion.button
className="p-3 text-xl bg-slate-800 hover-bg-slate-700 rounded-md transition-colors relative" 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 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
@ -67,4 +74,4 @@ const NavItem = ({ icon, selected, id, setSelected, logo }) => {
); );
}; };
export default IconSideNav; export default IconSideNav;