100 lines
2.2 KiB
TypeScript
100 lines
2.2 KiB
TypeScript
import { Media } from '@/styles/media';
|
||
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 { AppstoreOutlined, SettingOutlined } from 'ui/elements/icons';
|
||
|
||
const items: MenuProps['items'] = [
|
||
{
|
||
children: [
|
||
{
|
||
// icon: <HomeOutlined />,
|
||
key: '/',
|
||
label: <Link href="/">Главная</Link>,
|
||
},
|
||
{
|
||
// icon: <PlusSquareOutlined />,
|
||
key: '/unlimited',
|
||
label: <Link href="/unlimited">Без ограничений</Link>,
|
||
},
|
||
],
|
||
icon: <AppstoreOutlined />,
|
||
key: 'home',
|
||
label: 'Приложение',
|
||
},
|
||
{
|
||
children: [
|
||
{
|
||
// icon: <DatabaseOutlined />,
|
||
key: '/admin/cache',
|
||
label: <Link href="/admin/cache">Управление кэшем</Link>,
|
||
},
|
||
],
|
||
icon: <SettingOutlined />,
|
||
key: 'admin',
|
||
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)`
|
||
${min('laptop')} {
|
||
> :first-child {
|
||
min-height: 100%;
|
||
width: 280px;
|
||
}
|
||
}
|
||
`;
|
||
|
||
const ContentWrapper = styled(Wrapper)`
|
||
flex: 1;
|
||
`;
|
||
|
||
const Flex = styled.div`
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
${min('laptop')} {
|
||
flex-direction: row;
|
||
}
|
||
`;
|
||
|
||
export function Layout({ children }: PropsWithChildren) {
|
||
const { pathname } = useRouter();
|
||
|
||
return (
|
||
<Flex>
|
||
<Media lessThan="laptop">
|
||
<MenuWrapper>
|
||
<Menu selectedKeys={[pathname]} mode="horizontal" items={items} />
|
||
</MenuWrapper>
|
||
</Media>
|
||
<Media greaterThanOrEqual="laptop">
|
||
<MenuWrapper>
|
||
<Menu
|
||
defaultOpenKeys={['home', 'admin']}
|
||
selectedKeys={[pathname]}
|
||
mode="inline"
|
||
items={items}
|
||
/>
|
||
</MenuWrapper>
|
||
</Media>
|
||
<ContentWrapper>{children}</ContentWrapper>
|
||
</Flex>
|
||
);
|
||
}
|