import Header from './Header';
import { AppMenu } from './Menu';
import { NavigationBar } from './Navigation';
import { NavigationProvider } from '@/context/navigation';
import { Media } from '@/styles/media';
import { max, min } from '@/styles/mq';
import styled from 'styled-components';

const Main = styled.main`
  margin: 8px 0;

  ${max('laptop')} {
    margin-bottom: calc(46px + 8px); // 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>
      <Media lessThan="laptop">
        <NavigationBar />
      </Media>
    </NavigationProvider>
  );
}