equip-reserve-frontend/src/layouts/CommonLayout.jsx

import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Layout, Menu, theme } from "antd";
import { Content, Header } from "antd/es/layout/layout";
import Sider from "antd/es/layout/Sider";
import React, { useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import menuConfig from "../config/menuConfig";
import { useSelector } from "react-redux";
import { selectUserRole } from "../features/auth/authSlice";

export default function CommonLayout() {
  const location = useLocation();
  const naviagte = useNavigate();

  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const roles = useSelector(selectUserRole);

  const menu = menuConfig.filter(
    (item) => !item.roles || item.roles.some((role) => roles.includes(role))
  );

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          selectedKeys={[location.pathname]}
          mode="inline"
          items={menu.map((item) => ({
            key: item.path,
            label: item.label,
            icon: React.createElement(item.icon),
          }))}
          onClick={({ key }) => naviagte(key)}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} />
        <Content
          style={{
            margin: "16px 16px",
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}