<header>
  <div class="triangle left"><h1>This is a title</h1></div>
  <div class="triangle right"><h1>This is a title</h1></div>
  <button></button>
</header>

<nav>
  <ul>
    <li>Section 1</li>
    <li>Section 2</li>
    <li>Section 3</li>
  </ul>
  <div id="nav-close"><i class="fas fa-times"></i></div>
</nav>

<content>
  <section>Section 1</section>
  <section>Section 2</section>
  <section>Section 3</section>
</content>

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

body{
  min-height:300vh;
  background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
}

// HEADER
header{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  
  h1, button{
    position:relative;
    z-index:10;
  }
  
  h1{
    text-transform:uppercase;
    letter-spacing:1pt;
    font-size:3em;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
  }
  
  button{
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    position:absolute;
    bottom:100px;
    left:calc(50% - 60px);
    width:120px;
    height:50px;
    border:0;
    box-shadow:2px 1px 20px 0 rgba(#000, 0.5);
    border-radius:10px;
    cursor:pointer;
    background:#fff;
    font-size:1em;
    color:#09203f;
    transition:all .8s cubic-bezier(0.645, 0.045, 0.355, 1),
               transform .3s cubic-bezier(0.455, 0.03, 0.515, 0.955),
               box-shadow .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    overflow:hidden;
    
    &:hover{
      box-shadow:0 0 0 0 rgba(#000, 0.5);
    }
    
    &:focus{
      outline:0;
    }
    
    &:before, &:after{
      font-family:"Font Awesome 5 Free";
      transition:all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
      top: 17px;
      position: absolute;
    }
    
    &:before{
      content: "\f067";
      opacity:1;
      left: 53px;
    }
    
    &:after{
      content: "\f0c9";
      opacity: 0;
      left: 0;
    }
  }
  
  .triangle{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to top, #09203f 0%, #537895 100%);
    transition:all .8s cubic-bezier(0.645, 0.045, 0.355, 1);
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
    
    &.left{
      clip-path: polygon(0 0, 0% 100%, 100% 100%);
    }
    
    &.right{
      clip-path: polygon(100% 0, 0 0, 100% 100%);
    }
  }
  
  &.open{
    
    .triangle{
      
      &.left{
        clip-path: polygon(0 0, 0 100%, 0 100%);
      }
      
      &.right{
        clip-path: polygon(100% 0, 100% 0, 100% 100%);
      }
    }
    
    button{
      left:40px;
      bottom:40px;
      width:50px;
      border-radius:50%;
      
      &:before{
        opacity:0;
        left:100%;
      }
      
      &:after{
        opacity:1;
        left:18px;
      }
      
      &.menu{
        width:100%;
        height:100%;
        bottom:0;
        left:0;
        border-radius:0;
        
        &:after{
          left:-100%;
        }
      }
    }
  }
}

// CONTENT
content{
  
  section{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family: 'Montserrat', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    font-size:1em;
    letter-spacing:2pt;
    color:#fff;
  }
}

// NAV
nav{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display:flex;
  justify-content:center;
  align-items:center;
  display:none;
  
  ul{
    list-style:none;
    
    li{
      font-family: 'Montserrat', sans-serif;
      font-weight:700;
      text-transform:uppercase;
      line-height:2;
      letter-spacing:1pt;
      font-size:2em;
      color:#09203f;
      animation:fadeDown .5s forwards;
      opacity:0;
      cursor:pointer;
      transform:translateY(-20px);
      transition:all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
      
      &:hover{
        text-shadow:2px 1px 40px rgba(#000, 0.5);
        opacity:.8;
      }
      
      @for $i from 1 through 3{
        
        &:nth-child(#{$i}) {
          animation-delay: #{$i * 0.1 + 0.7}s;
        }
      }
    }
  }
  
  #nav-close{
    position:fixed;
    top:40px;
    right:40px;
    font-size:1.5em;
    cursor:pointer;
    animation:fadeDown .5s forwards;
    animation-delay:1.1s;
    opacity:0;
    color:#09203f;
    transform:translateY(-20px);
  }
  
  @keyframes fadeDown{
    0%{
      opacity:0;
      transform:translateY(-20px);
    }
    100%{
      opacity:1;
      transform:translateY(0);
    }
  }
}

// function to open/close nav
function toggleNav(){
  // if nav is open, close it
  if($("nav").is(":visible")){
    $("nav").fadeOut();
    $("button").removeClass("menu");
  }
  // if nav is closed, open it
  else{
    $("button").addClass("menu");
    $("nav").fadeIn().css('display', 'flex');
  }
}

// when clicking + or ☰ button
$("button").click(function(){
  // when clicking ☰ button, open nav
  if($("header").hasClass("open")){
    toggleNav();
  }
  // when clicking + button, open header
  else{
    $("header").addClass("open");
  }
});

// close nav
$("#nav-close").click(function(){
  toggleNav();
});

// scroll to sections
$("nav li").click(function(){
  // get index of clicked li and select according section
  var index = $(this).index();
  var target = $("content section").eq(index);
  
  toggleNav();
  
  $('html,body').delay(300).animate({
    scrollTop: target.offset().top
  }, 500);
});