89 lines
No EOL
3.5 KiB
TypeScript
89 lines
No EOL
3.5 KiB
TypeScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { IoIosArrowDown } from "react-icons/io";
|
|
|
|
|
|
import styles from './SidebarStyles/SidebarItem.module.css';
|
|
import SidebarSubmenu from "./SidebarSubmenu";
|
|
import { SidebarItemProps } from "./sidebarTypes";
|
|
|
|
const SidebarItem: React.FC<SidebarItemProps> = ({
|
|
item,
|
|
isOpen,
|
|
onToggle,
|
|
isActive,
|
|
isMinimized
|
|
}) => {
|
|
const Icon = item.icon as React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
const hasSubItems = item.submenu && item.submenu.length > 0;
|
|
const isDisabled = item.moduleEnabled === false;
|
|
|
|
const toggleSubmenu = (e: React.MouseEvent) => {
|
|
if (isDisabled) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onToggle();
|
|
};
|
|
|
|
const handleLinkClick = (e: React.MouseEvent) => {
|
|
if (isDisabled) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
// Allow normal navigation for the main link
|
|
};
|
|
|
|
return (
|
|
<div className={`${styles.menu} ${isMinimized ? styles.minimized : ''} ${isDisabled ? styles.disabled : ''}`}>
|
|
<li className={`${isActive ? styles.active : ""} ${isDisabled ? styles.disabledItem : ""}`}>
|
|
{/* Icon - always visible */}
|
|
{Icon && <Icon className={`${styles.icon} ${isDisabled ? styles.disabledIcon : ''}`} />}
|
|
|
|
{/* Text and arrow - hidden when minimized */}
|
|
{!isMinimized && (
|
|
<>
|
|
<Link
|
|
to={isDisabled ? "#" : (item.link || "#")}
|
|
className={`${styles.menuTextLink} ${isDisabled ? styles.disabledLink : ''}`}
|
|
onClick={handleLinkClick}
|
|
aria-disabled={isDisabled}
|
|
title={isDisabled ? `${item.name} (Module disabled)` : item.name}
|
|
>
|
|
<span className={`${styles.menuText} ${isDisabled ? styles.disabledText : ''}`}>
|
|
{item.name}
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Arrow button separate from link */}
|
|
{hasSubItems && (
|
|
<button
|
|
onClick={toggleSubmenu}
|
|
className={`${styles.arrowButton} ${isDisabled ? styles.disabledArrow : ''}`}
|
|
aria-disabled={isDisabled}
|
|
title={isDisabled ? `${item.name} (Module disabled)` : `Toggle ${item.name} submenu`}
|
|
>
|
|
<IoIosArrowDown className={`${styles.hassubmenu} ${isOpen ? styles.rotated : ''} ${isDisabled ? styles.disabledArrow : ''}`} />
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
|
|
{isMinimized && !isDisabled && (
|
|
<Link
|
|
to={item.link || "#"}
|
|
className={styles.minimizedOverlay}
|
|
title={item.name}
|
|
onClick={handleLinkClick}
|
|
/>
|
|
)}
|
|
</li>
|
|
{hasSubItems && !isMinimized && !isDisabled && <SidebarSubmenu item={item} isOpen={isOpen} />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SidebarItem; |