File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useState } from "react";
import { Link } from "react-router-dom";
import Icon from "@mdi/react";
import {
mdiHomeOutline,
mdiMagnify,
mdiPlusCircleOutline,
mdiInformationOutline,
} from "@mdi/js";
function Menu() {
const menuList = [
{
path: "/",
pathName: "HOME",
icon: <Icon path={mdiHomeOutline} size={1.6} rem />,
},
{
path: "/search",
pathName: "Search",
icon: <Icon path={mdiMagnify} size={1.6} rem />,
},
{
path: "/homeInsert",
pathName: "Add",
icon: <Icon path={mdiPlusCircleOutline} size={1.6} rem />,
},
{
path: "/custinfo",
pathName: "Cust Info",
icon: <Icon path={mdiInformationOutline} size={1.6} rem />,
},
];
const [activeIndex, setActiveIndex] = useState(null);
const handleClick = (index) => {
setActiveIndex(index);
};
return (
<nav className="main-menu">
<ul className="flex justify-between aling-center">
{menuList.map((menu, index) => (
<li
className={`${activeIndex === index ? "active" : ""}`}
onClick={() => handleClick(index)}
>
<Link
to={menu.path}
className="flex-column justify-center align-center">
<p>{menu.icon}</p>
<p>{menu.pathName}</p>
</Link>
</li>
))}
</ul>
</nav>
);
}
export default Menu;