figureslibres.cc/user/themes/figureslibres/scss/theme/_sidebar.scss

.sidebar-right{
  position: fixed;
  width: 100%;
  height: 100%;
  left: -100vw;
  top: 0;
  transition: 0.3s right ease;
  background: #f9f9f9fe;
  z-index: 1000;
  ul{
    span{
      line-height: 2rem;
    }
  }

  #icone_list{
    z-index: 1000;
    position: fixed;
    top: 20px;
    right: 20px;
  }
  .list-projets{
    height: 100%;
    overflow: auto;
    margin: 1rem auto auto 1rem;
    .title-menu{
      // padding-left: 0.5rem;
      &::after{
        content: " ";
        width: 0;
        height: 1px;
        display: block;
        margin-top: 0.5rem;
      }
    }
    .container-wrap{
      display: inline-flex;
    }
    .container{
      width: 85%;
      opacity: 0;
      position: relative;
      overflow: auto;
      padding: 1rem 2rem 2rem 0rem;
      margin-top: 20px;
      &::after{
        content: " ";
        height: 0;
        width: 1px;
        display: block;
        position: absolute;
        top: 0;
        margin-right: 1rem;
        right:0;
      }
    ul{
      margin-bottom: 20px;
      span.cat{
        display: block;
        line-height: 3rem;
      }
      li{
        display: inline-flex;
        align-items: flex-end;
        width: auto;
        position: relative;
        a{
          z-index: 0;
          display: block;
          background: #f9f9f9fe;
          transition: 0.6s background;
          margin-right: 0px;
          padding: 0 7px;
          .img{
            pointer-events: none;
            display: none;
            position: fixed;
            width: 300px;
            height: auto;
            z-index: 999;
            transform-origin: center center;
            transform: rotate(0deg);
            border-radius: 10px;
            overflow: hidden;
          }
          &:hover{
            z-index: 999;
            .img{
              display: block;
              transition: all 1s ease;
            }
          }
        }
        &:hover{
          &.culturelle{
            a{
              background: $color_culturelle;
              transition: 0.6s background;
            }
          }
          &.sociale{
            a{
              background: $color_sociale;
              transition: 0.6s background;
            }
          }
          &.publique{
            a{
              background: $color_publique;
              transition: 0.6s background;
            }
            &::before{}
          }
          &::before{
            min-width: 100%;
            transition: 0.3s background;
          }
        }
      }
      a{
        color: black;
        z-index: 999;
        &.active{
          color: black;
        }
      }
    }
    }
    .informations{
      min-width: 250px;
      position: relative;
      height: 100%;
      padding-left: 40px;
      opacity: 0;
     }
  }
  &.is-active{
    left: 0;
    transition: 0.5s 0.3s left ease;
    .title-menu{
      &::after{
        width: 100%;
        background: black;
        transition: 1s 0.9s width ease;
      }
    }
    .informations{
      padding-left: 25px;
      opacity: 1;
      transition: 1s opacity 1s ease;

    }
    .container{
      margin-top: 0;
      opacity: 1;
      transition: 1s opacity 1s ease;
      &::after{
        background: black;
        height: 100%;
        transition: 1s 0.9s height ease;
      }
    }
  }
}