import Header from './Header';
import { AppMenu } from './Navigation';
import { min } from '@/styles/mq';
import styled from 'styled-components';

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

  ${min('desktop-xl')} {
    margin: 8px 10%;
  }
`;

export default function Layout({ children, user }) {
  return (
    <>
      <Header />
      {user?.admin ? <AppMenu /> : false}
      <Main>{children}</Main>
    </>
  );
}