131 lines
4.5 KiB
TypeScript
131 lines
4.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View } from '../../types/common.ts';
|
|
|
|
export interface NavItem {
|
|
view: View;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
permissionId?: string;
|
|
href?: string;
|
|
subItems?: NavItem[];
|
|
disabled?: boolean;
|
|
}
|
|
|
|
interface NavLinkProps {
|
|
item: NavItem;
|
|
isActive: boolean;
|
|
isCollapsed: boolean;
|
|
setView: (view: View) => void;
|
|
view: View;
|
|
}
|
|
|
|
const NavLink: React.FC<NavLinkProps> = ({ item, isActive, isCollapsed, setView, view }) => {
|
|
const [isOpen, setIsOpen] = useState(isActive);
|
|
|
|
useEffect(() => {
|
|
if (isActive) {
|
|
setIsOpen(true);
|
|
}
|
|
}, [isActive]);
|
|
|
|
useEffect(() => {
|
|
if (isCollapsed) {
|
|
setIsOpen(false);
|
|
}
|
|
}, [isCollapsed]);
|
|
|
|
if (item.subItems) {
|
|
return (
|
|
<li className="w-full">
|
|
<button
|
|
onClick={() => !isCollapsed && setIsOpen(!isOpen)}
|
|
title={isCollapsed ? item.label : undefined}
|
|
className={`w-full flex items-center h-11 px-4 rounded-lg transition-colors duration-200 group ${
|
|
isActive
|
|
? 'bg-red-50 text-red-700'
|
|
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<div className="w-8 text-lg flex items-center justify-center -ml-1">{item.icon}</div>
|
|
{!isCollapsed && (
|
|
<span className="ml-2 text-sm font-semibold whitespace-nowrap flex-grow text-left">
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
{!isCollapsed && (
|
|
<i
|
|
className={`fa-solid fa-chevron-right text-xs transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
|
|
></i>
|
|
)}
|
|
</button>
|
|
{!isCollapsed && isOpen && (
|
|
<ul className="pl-8 mt-1 space-y-1">
|
|
{item.subItems.map((subItem) => (
|
|
<li key={subItem.href ?? subItem.view}>
|
|
{subItem.href ? (
|
|
<a
|
|
href={subItem.href}
|
|
className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left text-gray-500 hover:bg-gray-100 hover:text-gray-800`}
|
|
>
|
|
<div className="w-6 text-base flex items-center justify-center -ml-1">
|
|
{subItem.icon}
|
|
</div>
|
|
<span className="ml-2 text-sm font-medium whitespace-nowrap">
|
|
{subItem.label}
|
|
</span>
|
|
</a>
|
|
) : (
|
|
<button
|
|
onClick={() => !subItem.disabled && setView(subItem.view)}
|
|
disabled={subItem.disabled}
|
|
className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left ${
|
|
subItem.disabled
|
|
? 'opacity-40 cursor-not-allowed text-gray-400'
|
|
: view === subItem.view
|
|
? 'bg-red-600 text-white shadow-sm'
|
|
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'
|
|
}`}
|
|
>
|
|
<div className="w-6 text-base flex items-center justify-center -ml-1">
|
|
{subItem.icon}
|
|
</div>
|
|
<span className="ml-2 text-sm font-medium whitespace-nowrap">
|
|
{subItem.label}
|
|
</span>
|
|
{subItem.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
|
|
</button>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<li className="w-full">
|
|
<button
|
|
onClick={() => !item.disabled && setView(item.view)}
|
|
disabled={item.disabled}
|
|
title={isCollapsed ? item.label : undefined}
|
|
className={`w-full flex items-center h-11 px-4 rounded-lg transition-colors duration-200 group ${
|
|
item.disabled
|
|
? 'opacity-40 cursor-not-allowed text-gray-400'
|
|
: isActive
|
|
? 'bg-red-600 text-white shadow-md'
|
|
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
<div className="w-8 text-lg flex items-center justify-center -ml-1">{item.icon}</div>
|
|
{!isCollapsed && (
|
|
<span className="ml-2 text-sm font-semibold whitespace-nowrap">{item.label}</span>
|
|
)}
|
|
{!isCollapsed && item.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
|
|
</button>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default NavLink;
|