75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import {CloudServerOutlined, DashboardOutlined, GlobalOutlined, HomeOutlined} from '@ant-design/icons';
|
||
|
|
import {Layout, Menu} from 'antd';
|
||
|
|
import {Outlet, useNavigate} from "react-router";
|
||
|
|
|
||
|
|
|
||
|
|
const {Content, Footer, Sider} = Layout;
|
||
|
|
|
||
|
|
const items = [{
|
||
|
|
key: "home", icon: React.createElement(HomeOutlined), label: "Home", "data-navigate": "/",
|
||
|
|
}, {
|
||
|
|
key: "proxy", icon: React.createElement(CloudServerOutlined), label: "Smart Proxy", children: [{
|
||
|
|
key: "proxy/overview",
|
||
|
|
icon: React.createElement(DashboardOutlined),
|
||
|
|
label: "Overview",
|
||
|
|
"data-navigate": "/proxy",
|
||
|
|
}, {
|
||
|
|
key: "proxy/origins",
|
||
|
|
icon: React.createElement(GlobalOutlined),
|
||
|
|
label: "Web Origins",
|
||
|
|
"data-navigate": "/proxy/origins",
|
||
|
|
}]
|
||
|
|
}];
|
||
|
|
|
||
|
|
export default function BaseLayout() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
// @ts-ignore TODO
|
||
|
|
const addOnClick = (items) => {
|
||
|
|
// @ts-ignore TODO
|
||
|
|
return items.map((item) => {
|
||
|
|
return item ? {
|
||
|
|
...item,
|
||
|
|
children: item.children ? addOnClick(item.children) : null,
|
||
|
|
onClick: item["data-navigate"] ? () => {
|
||
|
|
navigate(item["data-navigate"]);
|
||
|
|
} : undefined
|
||
|
|
} : null;
|
||
|
|
})
|
||
|
|
};
|
||
|
|
const menuItems = addOnClick(items);
|
||
|
|
return (<Layout>
|
||
|
|
<Sider
|
||
|
|
breakpoint="lg"
|
||
|
|
collapsedWidth="0"
|
||
|
|
onBreakpoint={(broken) => {
|
||
|
|
console.log(broken);
|
||
|
|
}}
|
||
|
|
onCollapse={(collapsed, type) => {
|
||
|
|
console.log(collapsed, type);
|
||
|
|
}}
|
||
|
|
style={{height: "100vh"}}
|
||
|
|
>
|
||
|
|
<h1 className="logo" onClick={() => navigate("/")}>
|
||
|
|
<img src="https://jasima.app/img/logo.png" alt=""/>
|
||
|
|
jasima.app
|
||
|
|
</h1>
|
||
|
|
<Menu theme="dark" mode="inline" defaultSelectedKeys={['a']} items={menuItems}/>
|
||
|
|
</Sider>
|
||
|
|
<Layout>
|
||
|
|
<Content style={{margin: '24px 16px 0'}}>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
padding: 24, minHeight: 360, background: "white",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Outlet/>
|
||
|
|
</div>
|
||
|
|
</Content>
|
||
|
|
<Footer style={{textAlign: 'center'}}>
|
||
|
|
Copyright © 2021-{new Date().getFullYear()} SR2 Communications Limited.
|
||
|
|
</Footer>
|
||
|
|
</Layout>
|
||
|
|
</Layout>)
|
||
|
|
}
|