victorAnumudu
34 lines
1.3 KiB
React
34 lines
1.3 KiB
React
import { ReactNode } from "react"
|
|
// import { useLocation } from "react-router-dom"
|
|
|
|
|
|
export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu, setHideSubMenu, children}) {
|
|
|
|
// const btnName = name
|
|
|
|
// const {pathname} = useLocation()
|
|
|
|
// const [hideSubMenu, setHideSubMenu] = useState(true)
|
|
|
|
return (
|
|
// <Link
|
|
// className={`w-full flex items-center gap-2 px-4 py-2 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`}
|
|
// to={to}
|
|
// >
|
|
// {icon && <i className={`${icon}`}></i>}
|
|
// {shrinkAside ? '' : name}
|
|
// </Link>
|
|
<div
|
|
className={`w-full px-4 text-[13px] font-semibold rounded-md`}
|
|
>
|
|
<button onClick={setHideSubMenu} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
|
|
<span className="flex gap-2 items-center">{icon && <i className={`${icon}`}></i>}{shrinkAside ? '' : name}</span>
|
|
<i className={`fa-solid fa-caret-up ${(hideSubMenu && hideSubMenu==name) ? 'rotate-0' : 'rotate-180'}`}></i>
|
|
</button>
|
|
<div className={`w-full ${(hideSubMenu && hideSubMenu==name) ? 'block' : 'hidden'}`}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|