<div id="root"></div>

import * as React from 'https://cdn.skypack.dev/react@^16.13.1';
import * as ReactDOM from 'https://cdn.skypack.dev/react-dom@^16.13.1';
import styled from 'https://cdn.skypack.dev/styled-components';

const FlexContainer = styled.div`
  display: flex;
  flex-direction: row;

  @media (max-width: 768px) {
    flex-direction: column;
  }
`

const Navigation = styled(FlexContainer)`
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  width: calc(100% - 20px);
`

const Footer = styled(Navigation)`
  justify-content: flex-end;
`

const NavItem = styled.a`
  border: 1px solid purple;
  color: purple;
  font-size: 20px;
  margin: 0 15px 20px 0;
  padding: 10px;
  
  &:hover {
    opacity: 0.6;
  }
`

const FooterNavItem = styled(NavItem)`
  border: 0;
  font-size: 12px;
  margin-bottom: 0;
  padding: 0;
`

const ContentWrapper = styled.div`
  padding: 50px 10px;
`

const LeftSideNav = styled(FlexContainer)`
  justify-content: space-evenly;
  order: 1;

  @media (max-width: 768px) {
    order: 2;
  }
`

const Logo = styled.img`
  margin-bottom: 20px;
  order: 2;
  
  @media (max-width: 768px) {
    order: 1;
  }
`

const App = () => (
    <>
      {/* Start App Navigation at top of page */}
      <Navigation>
        <LeftSideNav>
          <NavItem>Link Two</NavItem>
          <NavItem>Link Three</NavItem>
          <NavItem>Link Three</NavItem>
          <NavItem>Link Four</NavItem>
        </LeftSideNav>
        <Logo alt="Logo" src="https://assets.codepen.io/t-90/placeholder-logo.svg" />
      </Navigation>
      {/* End App Navigation at top of page */}
      <ContentWrapper>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita, reiciendis delectus. Iusto possimus quasi fuga. Adipisci earum ratione officia non, saepe fugit quidem cupiditate nihil dignissimos rem autem mollitia consequatur!</p>
      </ContentWrapper>
      {/* Start App Footer at the bottom of the page */}
      <Footer>
        <FooterNavItem>Footer Link One</FooterNavItem>
        <FooterNavItem>Footer Link Two</FooterNavItem>
      </Footer>
      {/* End App Footer at the bottom of the page */}
     </>
  );

ReactDOM.render(<App />,
document.getElementById("root"))