88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import React, { useEffect, useState } from "react";
|
|
import { Layout } from "antd";
|
|
import Sider from "antd/es/layout/Sider";
|
|
import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
|
|
import SiderMenu from "@/components/SiderMenu";
|
|
import ProcessDiagramPage from "./ProcessDiagramPage";
|
|
import AccountsPage from "./AccountsPage";
|
|
import ConfigurationPage from "./ConfigurationPage";
|
|
import EventsListPage from "./EventsListPage";
|
|
import RunningProcessesPage from "./RunningProcessesPage";
|
|
|
|
export default function MainLayout() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [selectedKey, setSelectedKey] = useState("1");
|
|
|
|
const [width, setWidth] = useState<number | string>("15%");
|
|
const [collapsedWidth, setCollapsedWidth] = useState(50);
|
|
|
|
const calculateWidths = () => {
|
|
const windowWidth = window.innerWidth;
|
|
const expanded = Math.min(Math.max(windowWidth * 0.15, 180), 240);
|
|
const collapsed = Math.max(windowWidth * 0.038, 50);
|
|
setWidth(expanded);
|
|
setCollapsedWidth(collapsed);
|
|
};
|
|
|
|
useEffect(() => {
|
|
calculateWidths();
|
|
window.addEventListener("resize", calculateWidths);
|
|
return () => window.removeEventListener("resize", calculateWidths);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (location.pathname === "/") {
|
|
navigate("/process-diagram");
|
|
}
|
|
setSelectedKey(location.pathname);
|
|
}, [location.pathname]);
|
|
|
|
function hangleMenuClick(e: any) {
|
|
const key = e.key;
|
|
if (key === "toggle") {
|
|
setCollapsed(!collapsed);
|
|
return;
|
|
}
|
|
if (key === "divider") {
|
|
return;
|
|
}
|
|
|
|
setSelectedKey(key);
|
|
navigate(key);
|
|
}
|
|
|
|
return (
|
|
<Layout style={{ minHeight: "100vh" }}>
|
|
<Sider
|
|
className="sider"
|
|
collapsible
|
|
collapsed={collapsed}
|
|
onCollapse={(value) => setCollapsed(value)}
|
|
theme="light"
|
|
width={width}
|
|
collapsedWidth={collapsedWidth}
|
|
trigger={null}
|
|
>
|
|
<SiderMenu
|
|
collapsed={collapsed}
|
|
selectedKey={selectedKey}
|
|
hangleMenuClick={hangleMenuClick}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Routes>
|
|
<Route path="/process-diagram" element={<ProcessDiagramPage />} />
|
|
<Route path="/running-processes" element={<RunningProcessesPage />} />
|
|
<Route path="/accounts" element={<AccountsPage />} />
|
|
<Route path="/events-list" element={<EventsListPage />} />
|
|
<Route path="/configuration" element={<ConfigurationPage />} />
|
|
<Route path="*" element={<div>404 Not Found</div>} />
|
|
</Routes>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
}
|