victorAnumudu
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { Link, useLocation, useNavigate } from "react-router-dom";
|
|
|
|
import { Icons } from "../index";
|
|
|
|
export default function Aside() {
|
|
|
|
const {pathname} = useLocation()
|
|
|
|
const navigate = useNavigate()
|
|
|
|
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 border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent 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" onClick={()=>navigate('/login', {replace:true})}>
|
|
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'},
|
|
]
|