files

src/components/layouts/aside/AsideLinkWithSubLinks.jsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import { useLocation } from "react-router-dom"
+import { FaCaretDown } from "react-icons/fa";
+import Icons from "../../Icons";
+
+
+export default function AsideLinkWithSubLinks({shrinkAside, name, icon, to, children, isOpen}) {
+
+    // const btnName = name
+
+  const {pathname} = useLocation()
+
+  const isMatchedPath = pathname.split('/').includes('')
+  // isMatchedPath.splice(0,1)
+
+  const [hideSubMenu, setHideSubMenu] = useState(isOpen)
+
+  return (
+    <div 
+        className={`w-full px-4 text-[13px] font-semibold rounded`} 
+    >   
+        <button onClick={()=>setHideSubMenu(prev => !prev)} 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 && <Icons name={icon} />}{shrinkAside ? '' : name}</span>
+            <FaCaretDown className={`text-base ${(hideSubMenu) ? 'rotate-180' : 'rotate-0'}`} />
+        </button>
+        <div className={`w-full ${(hideSubMenu) ? 'block' : 'hidden'}`}>
+            {children}
+        </div>
+    </div>
+  )
+}