MIF_E31222881/resources/js/Components/SidebarSubmenu.jsx

49 lines
1.8 KiB
JavaScript

import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
import {useEffect, useState} from 'react'
import { Link, useLocation } from 'react-router-dom'
function SidebarSubmenu({submenu, name, icon}){
const location = useLocation()
const [isExpanded, setIsExpanded] = useState(false)
/** Open Submenu list if path found in routes, this is for directly loading submenu routes first time */
useEffect(() => {
if(submenu.filter(m => {return m.path === location.pathname})[0])setIsExpanded(true)
}, [])
return (
<div className='flex flex-col'>
{/** Route header */}
<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>
{/** Submenu list */}
<div className={` w-full `+ (isExpanded ? "" : "hidden")}>
<ul className={`menu menu-compact`}>
{
submenu.map((m, k) => {
return(
<li key={k}>
<Link to={m.path}>
{m.icon} {m.name}
{
location.pathname == 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>) : null
}
</Link>
</li>
)
})
}
</ul>
</div>
</div>
)
}
export default SidebarSubmenu