38 lines
891 B
JavaScript
38 lines
891 B
JavaScript
import Header from './Header';
|
|
import { AppMenu } from './Menu';
|
|
import { NavigationBar } from './Navigation';
|
|
import { screens } from '@/config/ui';
|
|
import { NavigationProvider } from '@/context/navigation';
|
|
import { max, min } from '@/styles/mq';
|
|
import dynamic from 'next/dynamic';
|
|
import styled from 'styled-components';
|
|
|
|
const MediaQuery = dynamic(() => import('react-responsive'), {
|
|
ssr: false,
|
|
});
|
|
|
|
const Main = styled.main`
|
|
margin: 8px 0;
|
|
|
|
${max('laptop')} {
|
|
margin-bottom: 40px; // height of the navigation bar
|
|
}
|
|
|
|
${min('desktop-xl')} {
|
|
margin: 8px 10%;
|
|
}
|
|
`;
|
|
|
|
export default function Layout({ children, user }) {
|
|
return (
|
|
<NavigationProvider>
|
|
<Header />
|
|
{user?.admin ? <AppMenu /> : false}
|
|
<Main>{children}</Main>
|
|
<MediaQuery maxWidth={screens.laptop}>
|
|
<NavigationBar />
|
|
</MediaQuery>
|
|
</NavigationProvider>
|
|
);
|
|
}
|