<!--
  Sliding panels for full screen navigation
-->

<div class="menu">Menu</div>

<nav>
  <div id="block__01" class="block__reveal"></div>
  <div id="block__02" class="block__reveal"></div>
  <div id="block__03" class="block__reveal"></div>
  <div id="block__04" class="block__reveal"></div>
  
  <div class="nav__container">
    <ul>
      <li class="nav__link">Home</li>
      <li class="nav__link">About</li>
      <li class="nav__link">Contact</li>
    </ul>
  </div>
</nav>

<main>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</main>

$grey: #dedede;
$dark-grey: #2a2a2a;

.font__styles {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  color: white;
}

// Main Css

body {
  background: white;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

main {
  width: 100vw;
  display: flex;
}

nav {
  width: 100vw;
  z-index: 90;
  position: relative;
}

.menu {
  @extend .font__styles;
  background: $dark-grey;
  position: fixed;
  padding: 20px 30px;
  top: 50px;
  right: 50px;
  border-radius: 30px;
  cursor: pointer;
  z-index: 100;
}

.block {
  border-right: 1px solid $grey;
  height: 100vh;
  width: 25%;
  background: transparent;
  
  &:last-child {
    border-right: none;
  }
}

.block__reveal {
  background: black;
  height: 100vh;
  position: absolute;
}

#block__01 { right: 0%; }

#block__02 { right: 25%; }

#block__03 { right: 50%; }

#block__04 { right: 75%; }

.nav__container {
  position: absolute;
  width: 50%;
  left: 25%;
  height: 100vh;
  text-align: center;
  
  ul {
    @extend .font__styles;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    font-size: 16px;
    
    li {
      padding: 20px 0;
      cursor: pointer;
    }
  }
}

var blocks = $('.block__reveal'),
    menuButton = $('.menu'),
    menuLinks = $('.nav__link');

var blockAnimation = new TimelineMax({
  paused: true,
  reversed: true
});

blockAnimation
  .staggerTo (blocks, 0.6, {
    width: '25%',
    ease: Circ.easeInOut
  }, 0.05)

  .staggerFromTo (menuLinks, 0.6, {
    y: 20,
    autoAlpha: 0,
    ease: Circ.easeInOut }, {
      y: 0,
      autoAlpha: 1
  }, 0.2)

menuButton.click(function(e) {
  blockAnimation.reversed() ?
    blockAnimation.play() : blockAnimation.reverse();
});