File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useState } from "react";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import { Link, useLocation } from "react-router-dom";
export default function SidebarItem({ item }) {
const [open, setOpen] = useState(false);
const toggleMenu = () => {
setOpen(!open);
};
const pathName = useLocation().pathname;
if (item.childrens) {
return (
<li
className={open ? "sidebar-item open" : "sidebar-item"}
onClick={toggleMenu}
>
<div className="sidebar-title flex">
<div className="flex-start">
{item.icon}
<span>{item.title}</span>
</div>
<KeyboardArrowDownIcon
className="toggle"
sx={{ fontSize: 20, color: "#333333", }}
/>
</div>
<ul className="sidebar-content">
{item.childrens.map((child, index) => (
<SidebarItem key={index} item={child} />
))}
</ul>
</li>
);
} else {
return (
<li className={pathName === item.path ? 'sidebar-item active' : 'sidebar-item'}>
<Link to={item.path || "#"} className="flex-start ">
{item.icon}
{item.title}
</Link>
</li>
);
}
}