.wrapper
  ul
    li
      #menu-button
        .bar
        .bar
        .bar
    li Journal
    li Services
    li About Us
    li Contact

@import url('https://fonts.googleapis.com/css?family=Oswald:400');

@mixin object($width, $height, $bg) {
  width: $width;
  height: $height;
  background: $bg;
}

@mixin transPos($top, $right, $bottom, $left,$transX,$transY) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
  transform: translate($transX, $transY);
}

@mixin menu($name,$transY,$rotate){
  animation :$name 0.4s ease-in-out forwards;
  @keyframes #{$name}{
    0%{ transform:none; }
    25%{ transform:translateY($transY); }
    100%{ transform:translateY($transY) rotate($rotate); }
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #343436;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  @include object(460px,60px,#fff);
  border-radius:5px;
  overflow:hidden;
  position:relative;
  li{
    @include object(100px,60px,#fff);
    position:absolute;
    left:0;
    transform:translateX(-50%);
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:15px 0 30px -5px rgba(#000,0.2);
    cursor:pointer;
    font-family: 'Oswald', sans-serif;
    padding-left: 15px;
    color:#343436;
    opacity:0;
    &:first-child {
      padding-left:0;
      z-index: 10;
      opacity:1;
      width:60px;
      transform:translateX(0);
    }
    &:after {
      content:'';
      display: inline-block;
      position:absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 30px 0 30px 15px;
      border-color: transparent transparent transparent #fff;
      right:-15px;
      top:0;
    }
  }
}


#menu-button {
  .bar {
    @include object(20px,2px,#343436);
    transition:0.3s linear;
    &:nth-child(2) {
      margin:5px 0;
    }
  }
  &.active {
    .bar {
      &:first-child{ @include menu(barOne,7px,45deg); }
      &:nth-child(2){ transform:scale(0); }
      &:last-child{ @include menu(barTwo,-7px,-45deg); }
    }
  }
}

@media screen and(max-width:467px){
  ul {
    transform:rotate(90deg);
  }
}

let menu = $('li:first-child'),
  menuButton = $('#menu-button'),
  journal = $('li:nth-child(2)'),
  services = $('li:nth-child(3)'),
  about = $('li:nth-child(4)'),
  contact = $('li:nth-child(5)');

//Look at this mess, I'll have to refactor it
menu.on('click',() => {
  menuButton.toggleClass('active');
  if(menuButton.hasClass('active')){
    journal.animate({'left':'110px','opacity':'1','z-index':'8'},500);
    services.animate({'left':'210px','opacity':'1','z-index':'6'},500);
    about.animate({'left':'310px','opacity':'1','z-index':'4'},500);
    contact.animate({'left':'410px','opacity':'1','z-index':'2'},500);
  }
  else {
    journal.animate({'left':'0','opacity':'0'},500);
    services.animate({'left':'0','opacity':'0'},500);
    about.animate({'left':'0','opacity':'0'},500);
    contact.animate({'left':'0','opacity':'0'},500);
  }
});