89 lines
2.2 KiB
React
89 lines
2.2 KiB
React
|
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 } from "react-router-dom";
|
||
|
|
import menuConfig from "../config/menuConfig";
|
||
|
|
import { useSelector } from "react-redux";
|
||
|
|
import { selectUserRole } from "../features/auth/authSlice";
|
||
|
|
|
||
|
|
function getItem(label, key, icon, children) {
|
||
|
|
return {
|
||
|
|
key,
|
||
|
|
icon,
|
||
|
|
children,
|
||
|
|
label,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
getItem("Option 1", "1", <PieChartOutlined />),
|
||
|
|
getItem("Option 2", "2", <DesktopOutlined />),
|
||
|
|
getItem("User", "sub1", <UserOutlined />, [
|
||
|
|
getItem("Tom", "3"),
|
||
|
|
getItem("Bill", "4"),
|
||
|
|
getItem("Alex", "5"),
|
||
|
|
]),
|
||
|
|
getItem("Team", "sub2", <TeamOutlined />, [
|
||
|
|
getItem("Team 1", "6"),
|
||
|
|
getItem("Team 2", "8"),
|
||
|
|
]),
|
||
|
|
getItem("Files", "9", <FileOutlined />),
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function CommonLayout() {
|
||
|
|
const location = useLocation();
|
||
|
|
|
||
|
|
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),
|
||
|
|
}))}
|
||
|
|
/>
|
||
|
|
</Sider>
|
||
|
|
<Layout>
|
||
|
|
<Header style={{ padding: 0, background: colorBgContainer }} />
|
||
|
|
<Content
|
||
|
|
style={{
|
||
|
|
margin: "16px 16px",
|
||
|
|
background: colorBgContainer,
|
||
|
|
borderRadius: borderRadiusLG,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Outlet />
|
||
|
|
</Content>
|
||
|
|
</Layout>
|
||
|
|
</Layout>
|
||
|
|
);
|
||
|
|
}
|