added dashboard layout

2024-03-16 02:53:40 +01:00
parent 90dc2adb92
commit 7cbfae619b
14 changed files with 221 additions and 7 deletions
@@ -0,0 +1,50 @@
+import { Link, useLocation } from "react-router-dom";
+
+import { Icons } from "../index";
+
+export default function Aside() {
+
+  const {pathname} = useLocation()
+
+  return (
+    <div className="py-5 px-10 flex flex-col h-full">
+      <div className="flex justify-center items-center text-sm">
+        <p className="w-14 h-14 rounded-full bg-[#5C2684]/50 flex items-center justify-center">
+          AC
+        </p>
+      </div>
+      <div className="mt-10 h-full overflow-y-auto">
+        {asideLinks.map((link, index) => (
+            <Link
+            key={index}
+            to={link.link}
+            className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium ${pathname == link.link ? 'border-2 border-[#5C2684] text-[#5C2684]' : 'text-[#585858]'}`}
+            >
+            <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
+            {link.name}
+            </Link>
+        ))}
+      </div>
+      <div className="w-full flex justify-center items-center">
+        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium">
+          Log out
+        </button>
+      </div>
+    </div>
+  );
+}
+
+
+type AsideLinksType = {
+    name: string,
+    link: string,
+    icon: string,
+    nestedlink?:boolean
+}[]
+const asideLinks:AsideLinksType = [
+    {name: 'Home', link: '/dashboard/home', icon: 'home'},
+    {name: 'My Profile', link: '/dashboard/profile', icon: 'profile'},
+    {name: 'Verification', link: '/dashboard/verification', icon: 'verification'},
+    {name: 'Payments', link: '/dashboard/payments', icon: 'payments'},
+    {name: 'Legals', link: '/dashboard/legals', icon: 'legals'},
+]