hubl/src/styles/menu-left.scss

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

  &.open {
    transform: translateX(0);
  }
  //@include border-shadow(right);
  
  sib-router {
    display: flex;
    flex-direction: column;
  
    .menu-wrapper {
      &.is-closed {
        .sub-menu {
          display: none;
        }
        .menu-chevron {
          transform: rotate(180deg);
        }
      }
    }
  
    .divider {
      height: 1px;
      background-color: $color-gainsboro-a02;
    }
  
    .sub-menu {
      padding-left: 1.8em;
      
      div {
        color: $color-spun-pearl;
        padding-bottom: 0.7em;
        font-size: 15px;
        cursor: pointer;
  
        div[name='project'] {
          display: flex;
  
          sib-display-div[name='dash'] {
            margin: 0 0.4em;
          }
        }
      }
    }
  
    .menu {
      display: flex;
      flex-direction: row-reverse;
      padding: 1em;
      // border-top: 1px solid #ddd;
      // &:last-child {
      //   border-bottom: 1px solid #ddd;
      // }
      cursor: pointer;
      font-weight: bold;
  
      &[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;
          font-size: 12px;
        }
      }
  
      .menu-icon {
        //flex-basis: 2em;
        width: 4em;
        flex-shrink: 0;
        flex-grow: 0;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: 11px;
  
        &:before {
          width: 1.9em;
          height: 1.9em;
          line-height: 1.9em;
          font-size: 1.6em;
          border-radius: 100%;
          // 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-chevron {
        width: 2em;
        flex-shrink: 0;
        flex-grow: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
  
        > div {
          color: $color-spun-pearl;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 11px;
        }
      }
  
      .menu-label {
        //flex-basis: 8em;
        width: 8em;
        flex-shrink: 0;
        flex-grow: 1;
        justify-content: center;
        display: flex;
        flex-direction: column;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.17px;
        font-size: 16px;
      }
  
      /*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
      .menu-notification {
        //flex-basis: 3em;
        width: 2em;
        flex-shrink: 0;
        flex-grow: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
  
        > sib-display {
          > div:first-of-type {
            color: $color-dark-lava;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.7em;
            height: 1.7em;
            border-radius: 100%;
            background-color: $color-mustard;
            font-size: 12px;
          }
        }
      }
  
      &[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;
          }
        }
      }
    }
  }
}

@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;
  }
}