#navbar {
  background-color: $color-purple-dark;
  color: $color-white;
  display: block;
  flex: 0 0 16em;
  flex-direction: column;
  overflow: auto;
  transition: flex-basis 0.5s ease-in-out;
  // max-width: 16rem;
  // position: relative;
  // min-height: 100%;

  &.open {
    transform: translateX(0);
  }
  
  sib-router {
  
    .menu-wrapper {
      &.is-closed {
        .sub-menu {
          display: none;
        }
        .menu-chevron {
          transform: rotate(180deg);
        }
      }
    }
  
    .menu {
      cursor: pointer;
      display: flex;
      flex-direction: row-reverse;
      font-weight: bold;
      padding: 1.6rem;
  
      &[active] {
        background-color: $color-mustard;
        color: $color-purple-dark;
  
        .menu-icon:before {
          background-color: $color-purple-dark;
          color: $color-white;
          // transform: perspective(1000px) translateZ(1px) scale(0.8);
        }
  
        .menu-notification > sib-display > div:first-child {
          background-color: $color-purple-dark;
          color: $color-mustard;
        }
      }
  
      .menu-icon {
        align-items: center;
        display: flex;
        justify-content: center;
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 1.7rem;
        width: 3.2em;
  
        &:before {
          border-radius: 100%;
          height: 1.9em;
          line-height: 1.9em;
          width: 1.9em;
          // transform: perspective(1000px) translateZ(1px) scale(1);
          // will-change: transform;
          // transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
        }
      }
      
      .menu-label {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
        font-weight: 600;
        justify-content: center;
        letter-spacing: 0.017rem;
        text-transform: uppercase;
        width: 8em;
      }
      
      /*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
      .menu-notification {
        align-self: center;
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
        width: 2em;
  
        > sib-display {
          
          > div:first-of-type {
            @extend %notification;
          }
        }
      }

      .menu-chevron {
        align-items: center;
        color: $color-spun-pearl;
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
        width: 2em;
      }
  
      > sib-display {
        display: block;
      }
    }

    .sub-menu {
      padding-left: 2.88rem;
      
      div {
        color: $color-spun-pearl;
        cursor: pointer;
        padding-bottom: 1.12rem;
  
        div[name='project'] {
          display: flex;
  
          sib-display-div[name='dash'] {
            margin: 0 0.4em;
          }
        }
      }
    }

    .divider {
      height: 1px;
      background-color: $color-gainsboro-a02;
    }
  }
}

@include media('width<phone') {
  #button-toggle {
    display: block;
  }

  #navbar {
    //transform: translateX(-120%);
    transition: flex-basis 0.5s ease-in-out;
    flex-basis: 0;
    //position: absolute;
    //top: auto;
    //display: none;
    //z-index: 1;
  }
}