69 lines
1.5 KiB
TypeScript
69 lines
1.5 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, PlusSquareOutlined } from 'ui/elements/icons';
|
||
|
||
const items: MenuProps['items'] = [
|
||
{
|
||
icon: <HomeOutlined />,
|
||
key: '/',
|
||
label: <Link href="/">Главная</Link>,
|
||
},
|
||
{
|
||
icon: <PlusSquareOutlined />,
|
||
key: '/unlimited',
|
||
label: <Link href="/unlimited">Без ограничений</Link>,
|
||
},
|
||
{
|
||
type: 'divider',
|
||
},
|
||
{
|
||
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>
|
||
);
|
||
}
|