123

components/Layout/Navbar/Navbar.tsx

@@ -0,0 +1,58 @@
+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;