Navigation

body.nav-active{ overflow: hidden }

body.nav-active{ overflow: hidden }

document.addEventListener('click', (e) => {
  if(e.target !== toggle && e.target !== nav) {
    nav.classList.remove('nav-active');
    document.body.classList.remove('nav-active');
    hamburger.classList.remove('is-active');
  }
})

toggle.addEventListener('click', () => {
  nav.classList.toggle('nav-active');
  document.body.classList.toggle('nav-active');
  hamburger.classList.toggle('is-active');
})

document.addEventListener('click', (e) => {
  if(e.target !== toggle && e.target !== nav) {
    nav.classList.remove('nav-active');
    document.body.classList.remove('nav-active');
    hamburger.classList.remove('is-active');
  }
})

toggle.addEventListener('click', () => {
  nav.classList.toggle('nav-active');
  document.body.classList.toggle('nav-active');
  hamburger.classList.toggle('is-active');
})

body {
  height: 200vh;
  
  &.nav-active{
    overflow: hidden;
    
    .hamburger { transform: rotate(45deg) }
    .hamburger::before { opacity: 0 }
    .hamburger::after { transform: rotate(90deg) translate(-6px) }
  
    .nav-link {
      transform: translateY(0%);
      transition-delay: 560ms;
      transition-duration: 240ms;
      transition-timing-function: cubic-bezier(.1, .2, .3, 1.4);
    }
  }  
}

body {
  height: 200vh;
  
  &.nav-active{
    overflow: hidden;
    
    .hamburger { transform: rotate(45deg) }
    .hamburger::before { opacity: 0 }
    .hamburger::after { transform: rotate(90deg) translate(-6px) }
  
    .nav-link {
      transform: translateY(0%);
      transition-delay: 560ms;
      transition-duration: 240ms;
      transition-timing-function: cubic-bezier(.1, .2, .3, 1.4);
    }
  }  
}

const toggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('.nav-link');
const hamburger = document.querySelector('.hamburger');

document.addEventListener('click', (e) => {
  if(e.target !== toggle && e.target !== nav) {
    document.body.classList.remove('nav-active');
  }
})

toggle.addEventListener('click', () => {
  document.body.classList.toggle('nav-active');
})

const toggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('.nav-link');
const hamburger = document.querySelector('.hamburger');

document.addEventListener('click', (e) => {
  if(e.target !== toggle && e.target !== nav) {
    document.body.classList.remove('nav-active');
  }
})

toggle.addEventListener('click', () => {
  document.body.classList.toggle('nav-active');
})