62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import { min } from '@/styles/mq';
|
||
import type { MenuProps } from 'antd';
|
||
import Link from 'next/link';
|
||
import { useRouter } from 'next/router';
|
||
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: '/admin',
|
||
label: 'Главная',
|
||
},
|
||
{
|
||
icon: <DatabaseOutlined />,
|
||
key: '/admin/cache',
|
||
label: <Link href="/admin/cache">Управление кэшем</Link>,
|
||
},
|
||
];
|
||
|
||
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) {
|
||
const { pathname } = useRouter();
|
||
|
||
return (
|
||
<Flex>
|
||
<MenuWrapper>
|
||
<Menu selectedKeys={[pathname]} mode="inline" items={items} />
|
||
</MenuWrapper>
|
||
<ContentWrapper>{children}</ContentWrapper>
|
||
</Flex>
|
||
);
|
||
}
|