56 lines
No EOL
1.7 KiB
TypeScript
56 lines
No EOL
1.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import { IoIosArrowDown } from "react-icons/io";
|
|
|
|
import styles from './SidebarItem.module.css';
|
|
import SidebarSubmenu from "./SidebarSubmenu";
|
|
|
|
interface SidebarItemProps {
|
|
item: {
|
|
id: string;
|
|
name: string;
|
|
link?: string;
|
|
icon?: React.ComponentType;
|
|
submenu?: {
|
|
id: string;
|
|
name: string;
|
|
link?: string;
|
|
}[];
|
|
};
|
|
}
|
|
|
|
const SidebarItem: React.FC<SidebarItemProps> = ({ item }) => {
|
|
const location = useLocation();
|
|
const Icon = item.icon as React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
const hasSubItems = item.submenu && item.submenu.length > 0;
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggleSubmenu = (e: React.MouseEvent) => {
|
|
if (hasSubItems) {
|
|
e.preventDefault();
|
|
setIsOpen(!isOpen);
|
|
}
|
|
};
|
|
|
|
const isActive = item.link && location.pathname === item.link;
|
|
|
|
return (
|
|
<div className={styles.menu}>
|
|
<li className={`${isActive ? styles.active : ""}`}>
|
|
{Icon && <Icon className={styles.icon} />}
|
|
{hasSubItems ? (
|
|
<a href="#" onClick={toggleSubmenu} className={styles.menuLink}>
|
|
{item.name}
|
|
<IoIosArrowDown className={`${styles.hassubmenu} ${isOpen ? styles.rotated : ''}`} />
|
|
</a>
|
|
) : (
|
|
<Link to={item.link || "#"}>{item.name}</Link>
|
|
)}
|
|
</li>
|
|
{hasSubItems && <SidebarSubmenu item={item} isOpen={isOpen} />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SidebarItem; |