<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
</div>
<a class="created-by" target="_blank" href="https://popmotion.io/pose">
  Pen created with
  <img src="https://user-images.githubusercontent.com/7850794/36951814-dbd58448-1fff-11e8-8fc7-4b03531ddffb.png" alt="Popmotion Pose" height="30" />
</a>

body {
  --pink: #FF1C68;
  --green: #14D790;
  --blue: #198FE3;
  --white: #fff;
  --gray: #e2e1e0;
  font-family: 'PT Sans', sans-serif;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--gray);
}

.created-by {
  flex: 0 0 50px;
  background: #fff;
  color: #222;
  text-decoration: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
  
  img {
    margin-left: 10px;
    transform: translateY(-3px);
  }
}

.logo {
  margin-left: 10px;
}

.pen {
  flex: 1 1 50%;
  width: 50%;
  margin: 20px auto;
  display: flex;
  background: var(--white);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  overflow: hidden;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  flex-grow: 1;
  background: var(--green);
  padding: 20px 0;
  margin: 0;
  list-style: none;
  /* to avoid the bounce showing background through */
  padding-left: 20px;
  margin-left: -20px;
}

li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

li a {
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  padding: 20px 50px 20px 30px;
}

const pose = window.pose.default;

const Sidebar = pose.nav({
  open: { x: '0%', staggerChildren: 100 },
  closed: { x: '-100%' }
})

const NavItem = pose.li({
  open: { opacity: 1 },
  closed: { opacity: 0 }
})

const Nav = ({ isOpen, navItems }) => (
  <Sidebar pose={isOpen ? 'open' : 'closed'}>
    <ul>
      {navItems.map(({ url, name }) => (
        <NavItem>
          <a href={url}>{name}</a>
        </NavItem>
      ))}
    </ul>
  </Sidebar>
)

/** Demo setup below **/
const navLinks = [
  { url: '#', name: 'Popmotion' },
  { url: '#', name: 'Pose' },
  { url: '#', name: 'Blog' },
  { url: '#', name: 'GitHub' },
];

class Example extends React.Component {
  state = { isOpen: false }

  componentDidMount() {
    this.setState({ isOpen: !this.state.isOpen });
    setInterval(() => {
      this.setState({ isOpen: !this.state.isOpen });
    }, 2000);
  }

  render() {
    return <Nav isOpen={this.state.isOpen} navItems={navLinks} />;
  }
};

ReactDOM.render(
  <Example />,
  document.querySelector('.pen')
);