<header class="header">
	<a class="logo-link" title="Home Page" href="#">
		Developer Bacon
	</a>
	<nav class="nav">
		<a class="nav__link" title="Search" href="#" >Search</a>
		<a class="nav__link" title="About" href="#" >About</a>
		<a class="nav__link" title="Contact" href="#" >Contact</a>
	</nav>
	<div class="nav__background nav__background-1"></div>
	<div class="nav__background nav__background-2"></div>
	<button aria-label="Menu Hamburger Button" class="nav-ham toggleNav">
		<span class="nav-ham__line"></span>
		<span class="nav-ham__line"></span>
		<span class="nav-ham__line"></span>
	</button>
	<div class="close-nav toggleNav"></div>
</header>

// This document was written in SCSS, If you would like to view this in normal CSS there is a down arrow at the top right of the CSS window then click "View Compiled CSS"

.header,
.header * {
 box-sizing: border-box;
}

body {
	background-color: black;
}

// Based on this [snippet](https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/) by Hugo Giraudel.
@mixin break($point) {
 @if map-has-key($breakpoints, $point) {
  @media screen and (max-width: map-get($breakpoints, $point)) {
   @content;
  }
 } @else {
  @warn 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. '
			+ 'Available breakpoints are: #{map-keys($breakpoints)}.';
 }
}

$breakpoints: (
 "xxs": 300px,
 "xs": 500px,
 "sm": 800px,
 "md": 1000px,
 "lg": 1400px,
 "xl": 1700px
) !default;

nav[role="navigation"] {
 text-align: center;

 a {
  display: inline-block;
  margin: 1em 0.75em 2em;
 }
}

.header {
 background-color: red;
 display: flex;
 justify-content: space-between;
 margin-bottom: 20px;
 padding: 1rem;
 box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
}

img.logo-link {
 height: 1rem;
 width: auto;
}

.logo-link,
.nav__link {
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: black;
 transition: color 0.3s ease;

 &:hover,
 &:focus {
  text-decoration: none;
  color: white;
 }
}

.nav__link {
 margin-left: 20px;
 display: inline;

 @include break(md) {
  padding: 0.75rem;
 }
}

.nav-ham,
.nav__background {
 display: none;
}

.nav-ham {
 z-index: 2;
}

@include break(md) {
 .nav {
  display: none;

  &.is-active {
   display: flex;
   flex-direction: column;
   padding: 8rem 2rem 70vh 1rem;
   justify-content: space-around;
   text-align: right;
   position: fixed;
   background-color: #222;
   color: white;
   top: 0;
   height: 100vh;
   width: 15rem;
   z-index: 5;
   box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);

   a {
    color: white;
    border-color: white;
   }
  }
 }

 .nav__background-1,
 .nav__background-2 {
  &.is-active {
   display: block;
   z-index: 3;
   background-color: gray;
   box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
   top: 0;
   height: 100vh;
   width: 18rem;
   position: fixed;
  }
 }

 .nav-ham {
  display: block;
  background: none;
  border: none;
  outline: none;
  height: 3rem;
  width: 3rem;
  position: absolute;
  right: 1rem;
  top: 0;
  z-index: 6;

  .nav-ham__line {
   border: 1px solid white;
   height: 0;
   width: 2rem;
   display: block;
   margin: 0.6rem 0 0.6rem auto;
   transform-origin: center right;
   transition: 0.3s;
  }

  & .is-active {
   &:first-child {
    transform-origin: center right;
    transform: rotate(-45deg);
   }

   &:nth-of-type(2) {
    width: 0;
    opacity: 0;
   }

   &:last-child {
    transform-origin: center right;
    transform: rotate(45deg);
   }
  }
 }
}

.close-nav {
 display: none;
 position: fixed;
 right: -100vw;
 top: 0;
 background: rgba(0, 0, 0, 0.7);
 height: 100vh;
 width: 100vw;
 opacity: 0;
 z-index: 2;

 @include break(md) {
  &.is-active {
   display: block;
  }
 }
}

.logo {
 vertical-align: bottom;
 width: 33px;
 padding: 0 1px;
}

document.querySelectorAll(".toggleNav").forEach(item => {
 item.addEventListener("click", function() {
  console.log("clicked");
  toggleNav();
 });
});

function closeNav() {
 document.querySelectorAll(".nav-ham, .nav-ham span").forEach(function(item) {
  item.classList.remove("is-active");
 });
 anime({
  targets: ".nav",
  duration: 400,
  easing: "easeInOutSine",
  right: [0, "-15rem"],
  complete: function() {
   document.querySelector(".nav").classList.remove("is-active");
  }
 });

 anime({
  targets: ".nav__background",
  delay: 150,
  duration: 400,
  easing: "easeInOutSine",
  right: ["0rem", "-18rem"],
  complete: function() {
   document.querySelectorAll(".nav__background").forEach(item => {
    item.classList.remove("is-active");
   });
  }
 });

 anime({
  targets: ".close-nav",
  delay: 150,
  duration: 400,
  easing: "easeInOutSine",
  right: [0, "-100vw"],
  opacity: 0,
  complete: function() {
   document.querySelector(".close-nav").classList.remove("is-active");
  }
 });
}
function toggleNav() {
 document.querySelectorAll(".nav-ham, .nav-ham span").forEach(item => {
	 if(item.classList.contains("is-active")) {
		 item.classList.remove("is-active");
	 } else {
  	item.classList.add("is-active"); 
	 }
 });

 if (document.querySelector(".nav").classList.contains("is-active")) {
  this.closeNav();
 } else {
  anime({
   targets: ".close-nav",
   duration: 400,
   easing: "easeInOutSine",
   right: ["-100vw", 0],
   opacity: 1,
   begin: function() {
    document.querySelector(".close-nav").classList.add("is-active");
   }
  });

  anime({
   targets: ".nav:not(.is-active)",
   duration: 400,
   delay: 150,
   easing: "easeInOutSine",
   right: ["-15rem", 0],
   begin: function() {
    document.querySelector(".nav").classList.add("is-active");
   }
  });

  anime({
   targets: ".nav__background:not(.is-active)",
   duration: 400,
   easing: "easeInOutSine",
   // right: ['-100vw',"-20vw"],
   right: ["-18rem", "0rem"],
   begin: function() {
    document.querySelectorAll(".nav__background").forEach(function(item) {
     item.classList.add("is-active");
    });
   }
  });
 }
}