import Header from './Header';
import { AppMenu } from './Menu';
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 (
    <>
      <Header />
      {user?.admin ? <AppMenu /> : false}
      <Main>{children}</Main>
    </>
  );
}