50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { ActionIcon, Container, Menu, Space } from '@mantine/core';
|
|
import { AppShell } from '@mantine/core';
|
|
import NavBar from './NavBar';
|
|
import HeaderPage from './Header';
|
|
import { getMainPath } from '../js/utils';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { RiMenu5Fill } from 'react-icons/ri';
|
|
import { useNavbarStore } from '../js/store';
|
|
|
|
|
|
function MainLayout({ children }:{ children:any }) {
|
|
const { navOpened } = useNavbarStore()
|
|
const location = useLocation()
|
|
useEffect(()=>{
|
|
if (location.pathname !== "/"){
|
|
sessionStorage.setItem('home_section', getMainPath())
|
|
}
|
|
},[location.pathname])
|
|
return <AppShell
|
|
header={{ height: 70 }}
|
|
navbar={{ width: 300 , breakpoint: "md", collapsed: { mobile: !navOpened } }}
|
|
p="md"
|
|
>
|
|
<HeaderPage />
|
|
<NavBar />
|
|
<AppShell.Main>
|
|
<Container size="lg">
|
|
{children}
|
|
</Container>
|
|
</AppShell.Main>
|
|
<Space h="lg" />
|
|
|
|
</AppShell>
|
|
|
|
}
|
|
|
|
export default MainLayout;
|
|
|
|
export const MenuDropDownWithButton = ({children}:{children:any}) => <Menu withArrow>
|
|
<Menu.Target>
|
|
<ActionIcon variant='transparent'>
|
|
<RiMenu5Fill size={24} color='#FFF'/>
|
|
</ActionIcon>
|
|
</Menu.Target>
|
|
<Menu.Dropdown>
|
|
{children}
|
|
</Menu.Dropdown>
|
|
</Menu>
|