56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { ActionIcon, Container, Menu, Space } from '@mantine/core';
|
|
import { AppShell } from '@mantine/core';
|
|
import NavBar from './NavBar';
|
|
import FooterPage from './Footer';
|
|
import HeaderPage from './Header';
|
|
import { getmainpath } from '../js/utils';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { RiMenu5Fill } from 'react-icons/ri';
|
|
|
|
|
|
|
|
|
|
function MainLayout({ children }:{ children:any }) {
|
|
const [opened, setOpened] = useState(false);
|
|
const location = useLocation()
|
|
useEffect(()=>{
|
|
if (location.pathname !== "/"){
|
|
sessionStorage.setItem('home_section', getmainpath())
|
|
}
|
|
},[location.pathname])
|
|
|
|
|
|
return <>
|
|
|
|
<AppShell
|
|
padding="md"
|
|
fixed
|
|
navbar={<NavBar closeNav={()=>setOpened(false)} opened={opened} />}
|
|
header={<HeaderPage navOpen={opened} setNav={setOpened} />}
|
|
footer={<FooterPage />}
|
|
>
|
|
<Container size="lg">
|
|
{children}
|
|
</Container>
|
|
<Space h="lg" />
|
|
|
|
</AppShell>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
export default MainLayout;
|
|
|
|
export const MenuDropDownWithButton = ({children}:{children:any}) => <Menu withArrow>
|
|
<Menu.Target>
|
|
<ActionIcon variant='transparent'>
|
|
<RiMenu5Fill size={24} />
|
|
</ActionIcon>
|
|
</Menu.Target>
|
|
<Menu.Dropdown>
|
|
{children}
|
|
</Menu.Dropdown>
|
|
</Menu>
|