// #navbar{}
// #navbar-router{}

.btn-toggle {
  @include icon('menu');
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: $color-white;
  color: $color-black;
  font-size: 2em;
  padding: 0.72em;
  cursor: pointer;
}

#navbar {
  background-color: $color-white;
  color: $color-grey;
  max-width: 16rem;
  position: sticky;
  top: 0;
  height: 100%;
  max-height: 100vh;
  &.open {
    transform: translateX(0);
  }
  @include border-shadow(right);
}

@media (max-width: 32rem) {
  .btn-toggle {
    display: block;
  }
  #navbar {
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    position: absolute;
    top: auto;
    z-index: 1;
  }
  #header {
    padding-left: 5rem;
  }
}

#menu-items {
  > * {
    display: block;
    border-top: 1px solid $color-grey;
    &:last-child {
      border-bottom: 1px solid $color-grey;
    }
    sib-route {
      display: block;
      cursor: pointer;
    }
    cursor: pointer;
    &[active] {
      color: $color-black;
      > div:before {
        background-color: $color-yellow-light;
        transform: perspective(1000px) translateZ(1px) scale(0.8);
      }
    }
    > div {
      text-align: center;
      text-transform: uppercase;
      &:before {
        display: block;
        margin: -0.5em auto 0;
        font-size: 2em;
        border-radius: 100%;
        padding: 0.7em;
        transform: perspective(1000px) translateZ(1px) scale(1);
        will-change: transform;
        transition: 
          all .3s ease,
          transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
      }
      width: max-content;
      padding: 2em;
    }
    &[id-prefix] {
      display: none;
    }
    > sib-display {
      display: block;
      font-size: 0.9em;
      color: #aaa;
      > div {
        margin-bottom: 1.5em;
        > sib-display {
          cursor: pointer;
          display: block;
          padding: 0.5em 2em;
        }
      }
    }
  }
}

/* sub menu (right menu) */

#mainContainer > div {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  > sib-router {
    display: block;
    background-color: #ccc;
    sib-route {
      display: block;
      > div {
        position: relative;
        padding: 1em 2em;
        border-bottom: 1px solid #888;
      }
      &[active] {
        font-weight: bold;
        > div:before {
          content: '<';
          position: absolute;
          transform: translateX(-150%);
        }
      }
    }
  }
  > div {
    margin: 0.5em;
    flex: 1 1 0px;
  }
}