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

#navbar {
  background-color: $col-dark-bg;
  color: $col-dark-fg;
  position: relative;
  max-width: 16rem;
  position: relative;
  &.open{
    transform: translateX(0);
  }
  .btn-toggle {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: $col-alt-bg;
    color: $col-alt-fg;
    font-size: 1.5em;
    padding: 0.5em;
    cursor: pointer;
    transform: translateX(100%);
  }
  @media (max-width: 32rem) {
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    position: absolute;
    z-index: 1;
    .btn-toggle {
      display: block;
    }
  }
}

#menu-items {
  > sib-route {
    display: block;
    padding: 2em;
    border-top: 1px solid white;
    cursor: pointer;
    &[id-prefix] {
      display: none;
    }
  }
}