42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import { routesData } from '~/driven/utils/configs/appConfig';
|
|
import { icons } from '~/driven/utils/constants/assertUrls';
|
|
import { useUser } from '~/driven/utils/helpers/contexts/userContext';
|
|
import { navigateToAuth } from '~/driven/utils/helpers/globalHelpers';
|
|
|
|
export default function Sidebar() {
|
|
const isCurrentPage = useLocation();
|
|
const userCTX = useUser();
|
|
const navigator = useNavigate();
|
|
const pages = Object.keys(routesData).map((routeKey) => {
|
|
const key = routeKey as keyof typeof routesData;
|
|
return (
|
|
<Link
|
|
key={key}
|
|
to={routesData[key].path}
|
|
className={`flex text-white mb-6 text-sm w-full py-2 pl-2 rounded-lg ${
|
|
isCurrentPage.pathname === routesData[key].path ? 'bg-primary-300' : ''
|
|
}`}
|
|
>
|
|
<img src={routesData[key].icon} alt='page icon' className='mr-2' />
|
|
<div>{routesData[key].title}</div>
|
|
</Link>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<aside className='w-[15rem] min-w-[10rem] [background:var(--color-gradient-primary-dark)] p-4 pt-6'>
|
|
<div className='logo'>
|
|
<img src={icons.logo} alt='logo icon' />
|
|
</div>
|
|
<div className='mt-14 flex flex-col items-baseline'>
|
|
{pages}
|
|
<div className='mt-auto text-white px-3 absolute bottom-5'>
|
|
<button onClick={() => navigateToAuth(userCTX, navigator)}>Log out</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|