123

components/Layout/Navbar/Navbar.module.css

@@ -0,0 +1,63 @@
+.navbar {
+    height: 100%;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.navbarMain {
+    flex: 1;
+}
+
+.header {
+    padding-bottom: var(--mantine-spacing-md);
+    margin-bottom: calc(var(--mantine-spacing-md) * 1.5);
+    border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.footer {
+    padding-top: var(--mantine-spacing-md);
+    margin-top: var(--mantine-spacing-md);
+    border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    border-radius: var(--mantine-radius-sm);
+    font-weight: 500;
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+
+        .linkIcon {
+            color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+        }
+    }
+
+    &[data-active] {
+        &,
+        &:hover {
+            background-color: var(--mantine-color-blue-light);
+            color: var(--mantine-color-blue-light-color);
+
+            .linkIcon {
+                color: var(--mantine-color-blue-light-color);
+            }
+        }
+    }
+}
+
+.linkIcon {
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    margin-right: var(--mantine-spacing-sm);
+    width: 25px;
+    height: 25px;
+}

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;

components/Layout/Navbar/types.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { Icon, IconProps } from '@tabler/icons-react';
+
+
+export type NavbarLinkKey = 'index' | 'products' | 'marketplaces' | 'legal-entities' | 'deal-requests';
+export type NavbarLink = {
+  href: string;
+  key: NavbarLinkKey;
+  label: string;
+  icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<Icon>>;
+};