//PEN HEADER
header.header
  h1.header__title Fancy Navigation
  .header__subtitle (click burger icon and hover links then)
  .header__btns.btns
    a.header__btn.btn(
      href="https://github.com/nat-davydova/fancy-navigation",
      title="Check on Github",
      target="_blank"
    ) Check on Github

//PEN CONTENT
//- links list mixin
mixin nav-item(linkHref, linkTitle, linkDescr)
  li.main-nav__item(data-add-text)
    a.main-nav__link(href=linkHref, title=linkTitle)
      span.main-nav__link-title= linkTitle
      span.main-nav__link-descr= linkDescr

nav.main-nav
  .container
    .main-nav__inner
      // logo block
      a.logo(href="#", title="Our Nice Logo") L

      //nav open button
      button.main-nav__toggler.toggler-open(type="button", title="Open Menu")
        .toggler-open__bar
        .toggler-open__bar
        .toggler-open__bar

      //nav expandable area
      .main-nav__expandable
        .main-nav__expandable-inner
          .container
            .main-nav__expandable-content
              //nav close btn
              button.main-nav__toggler.toggler-close(
                type="button",
                title="Close Menu"
              )
              //nav links list
              ul.main-nav__list
                +nav-item('#', 'Home', 'Return to a Home Page')
                +nav-item('#', 'Features', 'Read more about our amazing features!')
                +nav-item('#', 'Pricing', 'Check annual and monthly plans')
                +nav-item('#', 'FAQ', 'Answers to all the common questions are here')
                +nav-item('#', 'Contacts', 'Send us a message! We have 24/7 support')

//mixins
@mixin transition-mix(
  $property: all,
  $duration: 0.2s,
  $timing: linear,
  $delay: 0s
) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

@mixin position-absolute($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

// COMMON STYLES !!!YOU DON'T NEED THEM

//basic variables
$theme-font-color: #2c2c2c;

//common styles
body {
  padding-top: 130px;

  font: {
    family: "Roboto", sans-serif;
    size: 16px;
  }
  color: $theme-font-color;

  a {
    color: inherit;
    text-decoration: none;
  }
}

.btn {
  @include transition-mix;

  padding: 10px 20px;
  display: inline-block;
  margin-right: 10px;

  font: {
    family: inherit;
    size: inherit;
  }

  background-color: #fff;
  border: 1px solid $theme-font-color;
  border-radius: 3px;

  cursor: pointer;

  &:last-child {
    margin-right: 0;
  }

  &:hover,
  &.js-active {
    color: #fff;

    background-color: $theme-font-color;
  }
}

//header styles
.header {
  max-width: 600px;
  margin: 0 auto 50px;

  text-align: center;
}

.header__title {
  font: {
    size: 2.1rem;
    weight: 600;
  }
}

.header__subtitle {
  margin-bottom: 30px;

  font: {
    style: italic;
  }

  text-align: center;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;

  font: {
    size: 25px;
    weight: 700;
  }

  border-radius: 50%;
  background-color: #eee;
}

.toggler-close {
  top: 11px;
}

// NAV STYLES !!!YOU NEED THEM
$nav-dark-color: #2c2c2c;
$nav-light-color: #fff;
$nav-accent-color-1: #119da4;
$nav-accent-color-2: #ed474a;
$nav-accent-color-3: #568259;
$nav-accent-color-4: #422040;
$nav-accent-color-5: #02a9ea;
$nav-padding: 20px;

$toggler-width: 40px;
$toggler-height: 28px;

$toggler-bar-height: 3px;

.main-nav {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  padding: $nav-padding 0;

  background-color: $nav-dark-color;
  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);

  z-index: 900;
}

.container {
  width: 95%;
  max-width: 1090px;
  height: 100%;
  margin: auto;
}

.main-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.main-nav__toggler {
  position: relative;

  width: $toggler-width;
  height: $toggler-height;

  border: none;
  background-color: transparent;

  cursor: pointer;
}

.toggler-open {
  &:hover,
  &:focus {
    .toggler-open__bar {
      &:nth-child(1) {
        transform: scaleX(1.1) translateY(-3px);
      }

      &:nth-child(2) {
        transform: scaleX(0.9);
      }

      &:nth-child(3) {
        transform: scaleX(1.1) translateY(3px);
      }
    }
  }
}

.toggler-open__bar {
  @include position-absolute($left: 0);
  @include transition-mix(
    $duration: 0.2s,
    $timing: cubic-bezier(0, 1.07, 1, 2.71)
  );

  width: 100%;
  height: $toggler-bar-height;

  background-color: $nav-light-color;
  border-radius: $toggler-bar-height;

  &:nth-child(1) {
    top: 0;
  }

  &:nth-child(2) {
    top: $toggler-bar-height * 4;
  }

  &:nth-child(3) {
    top: $toggler-bar-height * 8;
  }
}

.toggler-close {
  &:before,
  &:after {
    @include position-absolute($top: 45%, $left: 5%);
    @include transition-mix(
      $duration: 0.15s,
      $timing: cubic-bezier(0, 1.07, 1, 2.71)
    );

    display: block;
    width: 90%;
    height: $toggler-bar-height;

    content: "";

    background-color: $nav-dark-color;
    border-radius: $toggler-bar-height;
  }

  &:before {
    transform: rotate(45deg);
  }

  &:after {
    transform: rotate(-45deg);
  }

  &:hover,
  &:focus {
    &:before {
      transform: rotate(25deg);
    }

    &:after {
      transform: rotate(-25deg);
    }
  }
}

.main-nav__expandable {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.main-nav__expandable-inner {
  @include position-absolute($top: 0, $left: 0);

  width: 100%;
  height: 100%;
  padding: $nav-padding 0;

  background-color: $nav-light-color;

  z-index: 5;
}

.main-nav__expandable-content {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.main-nav__list {
  height: 100%;
  padding: 0;
  margin: 0;

  list-style-type: none;
}

.main-nav__item {
  &:not(:last-child) {
    margin-bottom: 30px;
  }
}

.main-nav__link {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: $nav-dark-color;
}

.main-nav__link-title {
  font: {
    size: 3.4rem;
    weight: 700;
  }
  letter-spacing: 2px;
}

.main-nav__link-descr {
  margin-top: 5px;

  font: {
    style: italic;
  }
}

// nav toggling - effect styles
.main-nav__expandable {
  &:before,
  &:after {
    @include position-absolute($top: 0, $left: 0);
    @include transition-mix($duration: 0.3s, $timing: ease-out);

    display: block;
    width: 100%;
    height: 100%;

    transform: scaleX(0);
    transform-origin: left center;

    content: "";

    z-index: 1;
  }

  &:before {
    background-color: $nav-dark-color;
  }

  &:after {
    transition-delay: 0.07s;
    background-color: rgba($nav-light-color, 0.7);
  }

  &.js-open {
    opacity: 1;
    visibility: visible;

    &:before,
    &:after,
    .main-nav__expandable-inner {
      transform: scaleX(1);
    }

    .main-nav__expandable-inner {
      @include transition-mix(
        $duration: 0.3s,
        $timing: ease-out,
        $delay: 0.14s
      );
    }

    .main-nav__list {
      @include transition-mix($duration: 0s, $delay: 0.85s);

      opacity: 1;
      visibility: visible;
    }

    .main-nav__item {
      @include transition-mix($duration: 0.1s);
      transform: translateY(0);

      opacity: 1;
      visibility: visible;

      &:nth-child(1) {
        transition-delay: 0.85s;
      }

      &:nth-child(2) {
        transition-delay: 0.95s;
      }

      &:nth-child(3) {
        transition-delay: 1.05s;
      }

      &:nth-child(4) {
        transition-delay: 1.15s;
      }

      &:nth-child(5) {
        transition-delay: 1.25s;
      }
    }

    .toggler-close {
      @include transition-mix(
        $duration: 0.2s,
        $delay: 0.65s,
        $timing: cubic-bezier(0.14, 1.01, 0.54, 1.38)
      );
      transform: translateX(0);

      opacity: 1;
      visibility: visible;
    }
  }
}

.main-nav__expandable-inner {
  transform: scaleX(0);
  transform-origin: left center;
}

.toggler-close {
  transform: translateX(15px);

  opacity: 0;
  visibility: hidden;
}

.main-nav__list,
.main-nav__item {
  opacity: 0;
  visibility: hidden;
}

@keyframes transformScaling {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left center;
  }
  50.5% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}

.main-nav__item {
  position: relative;

  transform: translateY(20px);

  &:before {
    @include position-absolute($top: 0, $left: 0);

    display: block;
    width: 100%;
    height: 100%;

    content: "";

    transform: scaleX(0);
    transform-origin: left center;

    background-color: $nav-dark-color;

    z-index: 10;
  }

  &:after {
    @include position-absolute($top: -20px, $left: -20px);
    @include transition-mix($delay: 0s);

    display: block;

    font: {
      size: 5rem;
      weight: 700;
    }

    content: attr(data-add-text);

    opacity: 0;
    visibility: hidden;
    z-index: -1;
  }

  &:nth-child(1) {
    color: rgba($nav-accent-color-1, 0.2);
  }

  &:nth-child(2) {
    color: rgba($nav-accent-color-2, 0.2);
  }

  &:nth-child(3) {
    color: rgba($nav-accent-color-3, 0.2);
  }

  &:nth-child(4) {
    color: rgba($nav-accent-color-4, 0.2);
  }

  &:nth-child(5) {
    color: rgba($nav-accent-color-5, 0.2);
  }
}

.main-nav__link-title {
  @include transition-mix($delay: 0s);
}

.main-nav__item:hover {
  &:before {
    animation: transformScaling 0.4s linear 0s forwards;
  }

  &:after {
    @include transition-mix($delay: 0.45s, $timing: ease-out);

    opacity: 1;
    visibility: visible;
  }

  .main-nav__link-title {
    @include transition-mix($timing: ease-out, $delay: 0.45s);

    transform: translateX(10px);
  }
}

(function () {
  //*** PATH
  const PATH = {
    closeToggler: ".toggler-close",
    expandableNav: ".main-nav__expandable",
    navItem: ".main-nav__item",
    openToggler: ".toggler-open"
  };

  // *** HELPERS
  const editDataAttr = (elem, dataAttr, newVal) => {
    elem.dataset[dataAttr] = newVal;
  };

  const setDataAtrsToNavElems = () => {
    const navElems = Array.from(document.querySelectorAll(PATH.navItem));

    navElems.forEach((elem, index) => {
      editDataAttr(elem, "addText", `0${index + 1}`);
    });
  };

  setDataAtrsToNavElems();

  // *** EVENT LISTENERS
  document.body.addEventListener("click", (e) => {
    const target = e.target;

    if (target.closest(PATH.openToggler)) {
      const nav = document.querySelector(PATH.expandableNav);
      nav.classList.add("js-open");
    }

    if (target.closest(PATH.closeToggler)) {
      const nav = document.querySelector(PATH.expandableNav);
      nav.classList.remove("js-open");
    }
  });
})();