53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import React, { ReactNode, useEffect } from 'react';
|
|
|
|
import { Flex, Image } from '@chakra-ui/react';
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
import ikon from '@/assets/images/ikon.svg';
|
|
import { TOP_BAR_HEIGHT } from '@/components/TopBar/TopBar';
|
|
|
|
export type LayoutProps = React.PropsWithChildren<unknown> & {
|
|
topBar?: ReactNode;
|
|
};
|
|
|
|
export const PageLayout = ({ children }: LayoutProps) => {
|
|
const { pathname } = useLocation();
|
|
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<>
|
|
<Flex
|
|
minH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
|
maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
|
position="absolute"
|
|
top={TOP_BAR_HEIGHT}
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
minWidth="300px"
|
|
zIndex={0}
|
|
>
|
|
<Image src={ikon} boxSize="90vh" margin="auto" />
|
|
</Flex>
|
|
<Flex
|
|
direction="column"
|
|
overflowX="auto"
|
|
overflowY="auto"
|
|
minH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
|
maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
|
position="absolute"
|
|
top={TOP_BAR_HEIGHT}
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
minWidth="300px"
|
|
>
|
|
{children}
|
|
</Flex>
|
|
</>
|
|
);
|
|
};
|