loader ajax

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

@@ -1,55 +1,80 @@
 .sidebar-right{
   position: fixed;
-  width: 15%;
+  width: 20%;
   height: 100%;
-  right: 0;
+  right: calc( -20% + 0.5rem);
   top: 0;
-  display: inline-flex;
+  transition: 0.3s right ease;
+  #icone_list{
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    right: 0;
+  }
   .list-projets{
-    margin: auto;
+    height: 100%;
+    overflow: auto;
+    .container{
+      margin: auto;
     ul{
-      &:nth-child(1){
-        margin-top: 0;
+      text-align: left;
+      margin: 0;
+      span.cat{
+        display: block;
+        line-height: 3rem;
+        font-weight: bold;
+        padding-left: 23px;
       }
-      margin: $marg $marg 0px 0;
-      text-align: right;
       li{
-        &:hover{
-          a{
-            color: black;
-          }
-        }
-      }
-      a{
-        color: grey;
+        display: inline-flex;
+        width: 100%;
+        margin-top: -6px;
+        position: relative;
         &::before{
+          position: absolute;
           content: " ";
-          width: 5px;
-          height: 5px;
           display: inline-block;
-          border-radius: 5px;
-          vertical-align: middle;
-          margin-right: 5px;
+          min-width: 10px;
+          height: 100%;
+
         }
-        &#culturelle{
+        &.culturelle{
           &::before{
             background: $color_culturelle;
           }
         }
-        &#sociale{
+        &.sociale{
           &::before{
-          background: $color_sociale;
+            background: $color_sociale;
           }
         }
-        &#publique{
+        &.publique{
           &::before{
-          background: $color_publique;
+            background: $color_publique;
           }
         }
+        &:hover{
+          &::before{
+            min-width: 100%;
+            transition: 0.6s min-width;
+          }
+        }
+      }
+      a{
+        color: black;
+        display: block;
+        padding-left: 1rem;
+        z-index: 999;
+        width: 100%;
         &.active{
           color: black;
         }
       }
     }
+    }
+  }
+  &.is-active{
+      right: 0;
+      transition: 0.3s right ease;
   }
 }