<template>
  <header>
    <div class="position-relative">
      <button class="toggle btn border-secondary position-absolute p-1 m-1 ml-3" @click="toggleMenu"><span></span></button>
      <NavigationBreadcrumb :breadcrumb="breadcrumb" class="breadcrumb p-1" />
    </div>
    <NavigationMenuSidebar @toggleMenu="toggleMenu" :menus="menus" />
    <div class="bg_overlay position-fixed" @click="toggleMenu"></div>
  </header>
</template>

<script>
export default {
  props: {
    breadcrumb: Array,
    menus: Array
  },
  methods: {
    toggleMenu() {
      document.querySelector('.app').classList.toggle('open')
    }
  }
}
</script>

<style lang="scss">
$btn-width: 50px;

nav.breadcrumb {
  margin: .5rem .5rem .5rem 5rem;

  a {color: var(--text-primary-color)}

  .breadcrumb-item.active {
      opacity: .7;
  }
}

%hamburger-line {
  display: block;
  height: 4px;
  width: .8 * $btn-width;
  background: var(--text-primary-color);
  content: "";
  position: absolute;
  transition-property: transform;
  border-radius: 4px;
}

.toggle {
  height: $btn-width;
  width: $btn-width;
  line-height: $btn-width;

  span {
    @extend %hamburger-line;
    top: 50%;
    transform: translateY(-50%);
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: 75ms;

    .open & {
      transform: rotate(45deg);
      display: block;
      margin-top: -2px;
    }

    &::before {
      transition: top 75ms ease .12s,opacity 75ms ease;
      @extend %hamburger-line;
      top: -10px;

      .open & {
        opacity: 0;
      }
    }

    &::after {
      transition: bottom 75ms ease .12s,transform 75ms cubic-bezier(.55,.055,.675,.19);
      @extend %hamburger-line;
      bottom: -10px;

      .open & {
        top: 0;
        transform: rotate(-90deg);
      }
    }
  }
}

.menu {
  background: var(--background-color-primary);
  width: var(--menu-size);
  top: 0;
  z-index: 1200;
  height: 100vh;
  padding: 1.1rem 0.5rem;
  overflow-y: scroll;
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
  transition: left .5s ease-in-out;
  left: -400px;

  h1 {color: var(--text-primary-color);}

  .list-group-item {    
    &-action:not(.active) {background: transparent;}

    div {
      transition: left .3s ease-in-out;
      left: 0;

      &::before {
        content: "›";
        position: relative;
        left: -.5em;
      }

      &:hover {
        left: .5em;
      }
    }
  }

  .open & {
    left: 0;
  }

  .close {
    --size: 50px;
    width: var(--size);
    height: var(--size);
    top: .8rem;
    right: 0;
    font-size: 2rem;
  }

  h2 {
    cursor: default;
  }
}

.bg_overlay {
  top: 0;
  left: 0;
  right: 0;
  height: 120vh;
  z-index: 1100;
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease;
  background-color: rgba(34,41,47,.5);

  .open & {
    opacity: 1;
    visibility: visible;
  }
}

.logo {
    max-width: 75px;
}

@media (min-width:1200px) {
  .open {
    &.app {
      margin-left: var(--menu-size);
    }

    .menu {
      left: 0;
    }

    .bg_overlay {
      visibility: hidden;
      opacity: 0;
    }
  }
}
</style>