95 lines
3.1 KiB
JavaScript
95 lines
3.1 KiB
JavaScript
import {useState} from "react";
|
|
import {Grid, Layout, Menu} from "antd";
|
|
import {Outlet, useLocation, useNavigate} from "react-router-dom";
|
|
import {
|
|
HomeOutlined,
|
|
CalendarOutlined,
|
|
DatabaseOutlined,
|
|
FolderViewOutlined,
|
|
UserOutlined,
|
|
TeamOutlined,
|
|
LogoutOutlined,
|
|
MessageOutlined
|
|
} from "@ant-design/icons";
|
|
import {useAuth} from "../../Hooks/AuthContext.jsx";
|
|
|
|
const {Content, Footer, Sider} = Layout;
|
|
|
|
const getItem = (label, key, icon, children) => ({key, icon, children, label});
|
|
const {useBreakpoint} = Grid;
|
|
|
|
const MainLayout = () => {
|
|
const screens = useBreakpoint();
|
|
|
|
const [collapsed, setCollapsed] = useState(true);
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const {logout} = useAuth();
|
|
|
|
const menuItems = [
|
|
getItem("Главная", "/", <HomeOutlined/>),
|
|
getItem("Приёмы", "/appointments", <CalendarOutlined/>),
|
|
getItem("Выдачи линз", "/issues", <DatabaseOutlined/>),
|
|
getItem("Линзы и наборы", "/Lenses", <FolderViewOutlined/>),
|
|
getItem("Пациенты", "/Patients", <TeamOutlined/>),
|
|
getItem("Рассылки", "/mailing", <MessageOutlined/>),
|
|
{type: "divider"},
|
|
getItem("Мой профиль", "profile", <UserOutlined/>, [
|
|
getItem("Перейти в профиль", "/profile", <UserOutlined/>),
|
|
getItem("Выйти", "logout", <LogoutOutlined/>)
|
|
])
|
|
];
|
|
|
|
const handleMenuClick = ({key}) => {
|
|
if (key === "logout") {
|
|
logout();
|
|
return;
|
|
}
|
|
navigate(key);
|
|
};
|
|
|
|
return (
|
|
<Layout style={{minHeight: "100vh"}}>
|
|
<Sider
|
|
collapsible={!screens.xs}
|
|
collapsed={collapsed}
|
|
onCollapse={setCollapsed}
|
|
style={{height: "100vh", position: "fixed", left: 0}}
|
|
>
|
|
<div style={{display: "flex", justifyContent: "center", padding: 16}}>
|
|
<img
|
|
src="/logo_rounded.png"
|
|
alt="Логотип"
|
|
style={{width: collapsed ? 40 : 80, transition: "width 0.2s"}}
|
|
/>
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
selectedKeys={[location.pathname]}
|
|
mode="inline"
|
|
items={menuItems}
|
|
onClick={handleMenuClick}
|
|
/>
|
|
</Sider>
|
|
|
|
<Layout
|
|
style={{marginLeft: collapsed ? 80 : 200, transition: "margin-left 0.2s"}}
|
|
>
|
|
<Content style={{
|
|
margin: "0 16px",
|
|
padding: 24,
|
|
minHeight: "100vh",
|
|
overflow: "auto",
|
|
background: "#fff",
|
|
borderRadius: 8,
|
|
marginTop: "15px"
|
|
}}>
|
|
<Outlet/>
|
|
</Content>
|
|
<Footer style={{textAlign: "center"}}>Линза+ © {new Date().getFullYear()}</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default MainLayout; |