-
Notifications
You must be signed in to change notification settings - Fork 2k
/
layout.tsx
52 lines (45 loc) · 1.49 KB
/
layout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { ConfigProvider, Layout } from 'antd';
import ResourceSideNav, { SideNavItemKey } from './sidebar/sidebar';
import { theme } from '@/constants/theme';
import { useCallback, useState } from 'react';
import { CollapseType } from 'antd/es/layout/Sider';
const { Sider, Content } = Layout;
interface Props {
children: React.ReactNode;
onClickSideNavItem?: (key: SideNavItemKey) => void;
}
type CollapseCallback = (collapsed: boolean, type: CollapseType) => void;
const siderWidth = 256;
const collapsedWidth = 0;
export default function AppLayout({ children, onClickSideNavItem }: Props) {
const [contentMargin, setContentMargin] = useState(siderWidth);
const onCollapse = useCallback<CollapseCallback>((collapsed, _) => {
setContentMargin(collapsed ? collapsedWidth : siderWidth);
}, []);
return (
<ConfigProvider theme={theme}>
<Layout>
<Sider
style={{
height: '100vh',
backgroundColor: '#F2F2F4',
position: 'fixed',
left: 0,
top: 0,
bottom: 0
}}
width={siderWidth}
theme="light"
onCollapse={onCollapse}
breakpoint="lg"
collapsedWidth={collapsedWidth}
>
<ResourceSideNav onClick={onClickSideNavItem} />
</Sider>
<Layout style={{ marginLeft: contentMargin }}>
<Content style={{ backgroundColor: '#F2F2F4' }}>{children}</Content>
</Layout>
</Layout>
</ConfigProvider>
);
}