import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { MenuProvider } from '../_contexts/menuContext';
import AppHeader from './AppHeader';
import AppSidebar from './AppSidebar';

const Root = styled.div`
  display: flex;
  align-items: flex-start;
  padding-top: 90px;
`;

const Main = styled.div`
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 20px 30px 90px;
  max-width: ${props => props.theme.container.xxxlarge}px;

  @media (min-width: ${props => props.theme.breakpoints.large}px) {
    flex: 1;
    width: auto;
    padding: 20px 60px 90px;
  }
`;

const SideMenu = styled.div`
  display: none;

  @media (min-width: ${props => props.theme.breakpoints.xlarge}px) {
    display: block;
    position: sticky;
    top: 90px;
    width: 240px;
    flex-shrink: 0;
    padding: 20px;
  }
`;

export default function AppLayout({ children, quickNav }) {
  return (
    <Root>
      <MenuProvider>
        <AppHeader />
        <AppSidebar />
      </MenuProvider>
      <Main>{children}</Main>
      {quickNav ? <SideMenu>{quickNav}</SideMenu> : null}
    </Root>
  );
}

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
  quickNav: PropTypes.node
};