59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { useRouter } from 'next/router';
|
||
import {
|
||
IconBox,
|
||
IconBriefcase,
|
||
IconCheck,
|
||
IconLogout,
|
||
IconShoppingBag,
|
||
} from '@tabler/icons-react';
|
||
import { NavbarLink, NavbarLinkKey } from '@/components/Layout/Navbar/types';
|
||
import classes from './Navbar.module.css';
|
||
|
||
const data: NavbarLink[] = [
|
||
{ href: '/products', key: 'products', label: 'Товары', icon: IconBox },
|
||
{ href: '/marketplaces', key: 'marketplaces', label: 'Маркетплейсы', icon: IconShoppingBag },
|
||
{ href: '/legal-entities', key: 'legal-entities', label: 'Юр. лица', icon: IconBriefcase },
|
||
{ href: '/deal-requests', key: 'deal-requests', label: 'Заявки на сделку', icon: IconCheck },
|
||
];
|
||
const hrefToKeyMap: Record<string, NavbarLinkKey> = data.reduce(
|
||
(acc, item) => ({ ...acc, [`${item.href}`]: `${item.key}` }),
|
||
{ '/': 'index' }
|
||
);
|
||
export function Navbar() {
|
||
const router = useRouter();
|
||
const currentPath = router.pathname;
|
||
const active = hrefToKeyMap[currentPath];
|
||
const links = data.map((item) => {
|
||
return (
|
||
<a
|
||
className={classes.link}
|
||
data-active={item.key === active || undefined}
|
||
href={item.href}
|
||
key={item.label}
|
||
onClick={async (event) => {
|
||
event.preventDefault();
|
||
await router.push(item.href);
|
||
}}
|
||
>
|
||
<item.icon className={classes.linkIcon} stroke={1.5} />
|
||
<span>{item.label}</span>
|
||
</a>
|
||
);
|
||
});
|
||
|
||
return (
|
||
<nav className={classes.navbar}>
|
||
<div className={classes.navbarMain}>{links}</div>
|
||
|
||
<div className={classes.footer}>
|
||
<a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
|
||
<IconLogout className={classes.linkIcon} stroke={1.5} />
|
||
<span>Выйти</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
);
|
||
}
|
||
|
||
export default Navbar;
|