58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import { min } from '@/styles/mq';
|
|
import type { MenuProps } from 'antd';
|
|
import type { PropsWithChildren } from 'react';
|
|
import styled from 'styled-components';
|
|
import { Menu } from 'ui/elements';
|
|
import { DatabaseOutlined, HomeOutlined } from 'ui/elements/icons';
|
|
|
|
const items: MenuProps['items'] = [
|
|
{
|
|
disabled: true,
|
|
icon: <HomeOutlined />,
|
|
key: 'home',
|
|
label: 'Главная',
|
|
},
|
|
{
|
|
icon: <DatabaseOutlined />,
|
|
key: 'cache-control',
|
|
label: 'Управление кэшем',
|
|
},
|
|
];
|
|
|
|
const Wrapper = styled.div`
|
|
${min('laptop')} {
|
|
height: calc(100vh - var(--height-header));
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
${min('desktop-xl')} {
|
|
height: calc(calc(100vh - var(--height-header)) - 16px);
|
|
}
|
|
`;
|
|
|
|
const MenuWrapper = styled(Wrapper)`
|
|
> :first-child {
|
|
min-height: 100%;
|
|
width: 280px;
|
|
}
|
|
`;
|
|
|
|
const ContentWrapper = styled(Wrapper)`
|
|
flex: 1;
|
|
`;
|
|
|
|
const Flex = styled.div`
|
|
display: flex;
|
|
`;
|
|
|
|
export function Layout({ children }: PropsWithChildren) {
|
|
return (
|
|
<Flex>
|
|
<MenuWrapper>
|
|
<Menu mode="inline" items={items} />
|
|
</MenuWrapper>
|
|
<ContentWrapper>{children}</ContentWrapper>
|
|
</Flex>
|
|
);
|
|
}
|