<section class="top-banner">
  <div class="top-banner-overlay">
    <h1>Big Title Here</h1>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</section>
<nav class="top-nav">
  <div class="menu-wrapper">
    <ul class="menu">
      <li>
        <a href="">home</a>
      </li>
      <li>
        <a href="">about</a>
        <ul class="sub-menu">
          <li>
            <a href="">— company</a>
          </li>
          <li>
            <a href="">— people</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="">projects</a>
      </li>
      <li>
        <a href="">clients</a>
      </li>
      <li>
        <a href="">contact</a>
      </li>
    </ul>
    <button class="menu-close" type="button" aria-label="close menu">✕</button>
  </div>
  <div class="fixed-menu">
    <h2 class="logo">LOGO</h2>
    <button class="menu-toggle" type="button" aria-label="toggle menu">☰</button>
    <ul class="socials">
      <li>
        <a href="">facebook</a>
      </li>
      <li>
        <a href="">twitter</a>
      </li>
      <li>
        <a href="">instagram</a>
      </li>
    </ul>
  </div>
</nav>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

:root {
  --white: white;
  --black: black;
  --menu-color: #b1ffe5;
  --fixed-menu-color: aquamarine;
}

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

ul {
  list-style: none;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
}

button:active {
  color: var(--black);
}

a {
  text-decoration: none;
  color: var(--black);
}

body {
  font: normal 18px/1.5 "Ubuntu", sans-serif;
}

.no-transition * {
  transition: none !important;
}

/* TOP BANNER RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.top-banner {
  position: relative;
  left: 150px;
  display: flex;
  width: calc(100% - 150px);
  height: 100vh;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/unsplash.jpg)
    no-repeat center / cover;
}

.top-banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 350px;
  padding: 20px;
  transition: all 0.7s;
  color: var(--white);
  background: rgba(0, 0, 0, 0.7);
}

.top-banner-overlay.is-moved {
  transform: translateX(350px);
}

.top-banner-overlay.is-moved::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 20px;
  box-shadow: 3px 0 10px rgba(0, 0, 0, .75);
}

.top-banner-overlay p {
  margin-top: 10px;
}

.top-nav li + li {
  margin-top: 7px;
}

/* MENU WRAPPER RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.top-nav .menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 350px;
  padding: 20px;
  transform: translateX(-200px);
  transition: transform 0.7s;
  background: var(--menu-color);
}

.top-nav .menu-wrapper.is-opened {
  transform: translateX(150px);
}

.top-nav .menu-wrapper .menu {
  opacity: 0;
  transition: opacity 0.4s;
}

.top-nav .menu-wrapper.is-opened .menu {
  opacity: 1;
  transition-delay: 0.6s;
}

.top-nav .menu-wrapper .menu a {
  font-size: 1.2rem;
}

.top-nav .menu-wrapper .sub-menu {
  padding: 10px 0 0 7px;
}

.top-nav .menu-wrapper .menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2rem;
}

/* FIXED MENU RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.top-nav .fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 150px;
  padding: 20px;
  background: var(--fixed-menu-color);
}

.top-nav .fixed-menu .menu-toggle {
  font-size: 2rem;
  text-align: left;
  margin: 30px 0 auto;
  width: 28px;
}

/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 900px) {
  body {
    font-size: 16px;
    overflow-x: hidden;
  }

  .top-banner {
    top: 50px;
    left: auto;
    width: 100%;
    height: calc(100vh - 50px);
    transform: none;
    align-items: center;
  }

  .top-banner-overlay {
    position: relative; /*2*/
    left: 0; /*2*/
    max-width: 100%;
  }

  .top-banner-overlay.is-moved {
    left: 100%; /*2*/
    transform: none;
  }

  .top-nav .menu-wrapper {
    width: 100%;
    transform: translateX(-100%);
    padding-top: 70px;
  }

  .top-nav .menu-wrapper.is-opened {
    transform: none;
  }

  .top-nav .menu-wrapper .menu-close {
    top: 70px;
  }

  .top-nav .fixed-menu {
    bottom: auto;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
  }

  .top-nav .fixed-menu .menu-toggle {
    margin: 0;
    order: 3;
  }

  .top-nav .socials {
    display: flex;
    margin-left: auto;
  }

  .top-nav .socials li {
    margin-right: 15px;
  }

  .top-nav .socials li + li {
    margin-top: 0;
  }
}

/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  font-size: 16px;
  background: var(--white);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const body = document.body;
const topNav = document.querySelector(".top-nav");
const menuToggle = topNav.querySelector(".menu-toggle");
const menuClose = topNav.querySelector(".menu-close");
const menuWrapper = topNav.querySelector(".menu-wrapper");
const topBannerOverlay = document.querySelector(".top-banner-overlay");
const isOpenedClass = "is-opened";
const isMovedClass = "is-moved";
const noTransitionClass = "no-transition";
let resize;

menuToggle.addEventListener("click", () => {
  menuWrapper.classList.toggle(isOpenedClass);
  topBannerOverlay.classList.toggle(isMovedClass);
});

menuClose.addEventListener("click", () => {
  menuWrapper.classList.remove(isOpenedClass);
  topBannerOverlay.classList.remove(isMovedClass);
});

document.addEventListener("keydown", (e) => {
  if (e.key == "Escape" && menuWrapper.classList.contains(isOpenedClass)) {
    menuClose.click();
  }
});

window.addEventListener("resize", () => {
  body.classList.add(noTransitionClass);
  clearTimeout(resize);
  resize = setTimeout(() => {
    body.classList.remove(noTransitionClass);
  }, 500);
});