File "MainLayout.tsx"

Full Path: /var/www/html/front_back/workspace/Gitep-front/src/shared/ui/layouts/MainLayout.tsx
File size: 1.43 KB
MIME-type: text/x-java
Charset: utf-8

import { Layout, Menu, MenuProps } from "antd";
import Sider from "antd/es/layout/Sider";
import { Outlet, useLocation, useNavigate } from "react-router";
import styles from "./layouts.module.scss";
import Logo from "../../assets/images/icons/logo.svg";
import Payments from "../../assets/images/icons/payments.svg";
import { DDS, PAYMENTS, PROJECT } from "@shared/config/routes";

export const MainLayout = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const onClickMenuItem: MenuProps["onClick"] = ({ key }: { key: string }) => {
    navigate(key);
  };

  return (
    <Layout className={styles.main}>
      <Sider collapsed={true} className={styles.sider}>
        <img className={styles.logo} src={Logo} alt="" />
        <Menu
          onClick={onClickMenuItem}
          className={styles.menu}
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[location.pathname || PAYMENTS]}
          items={[
            {
              key: "/" + PAYMENTS,
              icon: <img src={Payments} />,
              label: "Платежи",
            },
            {
              key: "/" + PROJECT,
              icon: <img src={Payments} />,
              label: "Проект",
            },
            {
              key: "/" + DDS,
              icon: <img src={Payments} />,
              label: "ДДС",
            },
          ]}
        />
      </Sider>
      <Outlet />
    </Layout>
  );
};