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

Use react-icons instead for icons

Browse Source
This commit is contained in:
sosokker 2023-11-12 23:39:23 +07:00
parent 47c6e58827
commit bb331f7f3f
1 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,20 @@
import { useState } from "react"; import { useState } from "react";
import {
AiOutlineHome,
AiOutlineSchedule,
AiOutlineUnorderedList,
AiOutlinePieChart,
AiOutlinePlus,
} from "react-icons/ai";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { Link, useNavigate } from "react-router-dom"; 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";
import pieLogo from "../assets/pie-chart.png";
import plusLogo from "../assets/plus.png";
const menuItems = [ const menuItems = [
{ id: 0, path: "/", icon: <homeLogo />, logo: homeLogo }, { id: 0, path: "/", icon: <AiOutlineHome /> },
{ id: 1, path: "/tasks", icon: <planLogo />, logo: planLogo }, { id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
{ id: 2, path: "/calendar", icon: <calendarLogo />, logo: calendarLogo }, { id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
{ id: 3, path: "/analytic", icon: <pieLogo />, logo: pieLogo }, { id: 3, path: "/analytic", icon: <AiOutlinePieChart /> },
{ id: 4, path: "/priority", icon: <plusLogo />, logo: plusLogo }, { id: 4, path: "/priority", icon: <AiOutlinePlus /> },
]; ];
const IconSideNav = () => { const IconSideNav = () => {
@ -28,14 +30,13 @@ const SideNav = () => {
return ( return (
<nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-screen"> <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-screen">
{menuItems.map((item) => ( {menuItems.map(item => (
<NavItem <NavItem
key={item.id} key={item.id}
icon={item.icon} icon={item.icon}
selected={selected === item.id} selected={selected === item.id}
id={item.id} id={item.id}
setSelected={setSelected} setSelected={setSelected}
logo={item.logo}
path={item.path} path={item.path}
/> />
))} ))}
@ -54,22 +55,17 @@ const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
navigate(path); navigate(path);
}} }}
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}>
>
<AnimatePresence> <AnimatePresence>
{selected && ( {selected && (
<motion.span <motion.span
className="absolute inset-0 rounded-md bg-indigo-600 z-0" className="absolute inset-0 rounded-md bg-indigo-600 z-0"
initial={{ scale: 0 }} initial={{ scale: 0 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
exit={{ scale: 0 }} exit={{ scale: 0 }}></motion.span>
></motion.span>
)} )}
</AnimatePresence> </AnimatePresence>
<span className="block relative z-10"> <span className="block relative z-10">{icon}</span>
{icon}
<img src={logo} alt="Logo" className="h-8 w-8 mx-auto my-2" />
</span>
</motion.button> </motion.button>
); );
}; };