46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
|
|
import { useEffect, useState } from 'react';
|
|
import { Link, usePage } from '@inertiajs/react';
|
|
|
|
function SidebarSubmenu({ submenu, name, icon }) {
|
|
const { url } = usePage();
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (submenu.some(m => m.path === url)) {
|
|
setIsExpanded(true);
|
|
}
|
|
}, [url, submenu]);
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div className="w-full block" onClick={() => setIsExpanded(!isExpanded)}>
|
|
{icon} {name}
|
|
<ChevronDownIcon
|
|
className={`w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all ${isExpanded ? 'rotate-180' : ''
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div className={`w-full ${isExpanded ? '' : 'hidden'}`}>
|
|
<ul className="menu menu-compact">
|
|
{submenu.map((m, k) => (
|
|
<li key={k}>
|
|
<Link href={m.path}>
|
|
{m.icon} {m.name}
|
|
{url === m.path && (
|
|
<span
|
|
className="absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary"
|
|
aria-hidden="true"
|
|
></span>
|
|
)}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SidebarSubmenu;
|