modif css

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

@@ -2,28 +2,26 @@
   position: fixed;
   width: 100%;
   height: 100%;
-  // right: calc( -20% + 0.5rem);
   left: -100vw;
   top: 0;
   transition: 0.3s right ease;
-  background: white;
+  background: #f9f9f9fe;
   z-index: 1000;
   ul{
-    & > *:not(span) {
-      // border: 2px solid black;
-      // border-radius: 50px;
+    span{
+      line-height: 2rem;
     }
   }
 
   #icone_list{
     z-index: 1000;
     position: fixed;
-    top: 0;
+    top: 10px;
     right: 0;
   }
   .list-projets{
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
     .title-menu{
       padding-left: 0.5rem;
       &::after{
@@ -34,11 +32,26 @@
         margin-top: 0.5rem;
       }
     }
+    .container-wrap{
+      display: inline-flex;
+    }
     .container{
+      width: 85%;
+      opacity: 0;
+      position: relative;
       overflow: auto;
       padding: 1rem 2rem 2rem 0.5rem;
-      width: 85%;
-      float: left;
+      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{
@@ -53,8 +66,10 @@
         a{
           z-index: 0;
           display: block;
-          background: white;
+          background: #f9f9f9fe;
           transition: 0.6s background;
+          margin-right: 0px;
+          padding: 0 7px;
           .img{
             pointer-events: none;
             display: none;
@@ -75,28 +90,18 @@
             }
           }
         }
-        // &::before{
-        //   position: absolute;
-        //   content: " ";
-        //   display: inline-block;
-        //   height: 100%;
-        //   transition: 0.6s background;
-        // }
         &:hover{
           &.culturelle{
             a{
               background: $color_culturelle;
               transition: 0.6s background;
             }
-            // &::before{
-            // }
           }
           &.sociale{
             a{
               background: $color_sociale;
               transition: 0.6s background;
             }
-            // &::before{}
           }
           &.publique{
             a{
@@ -121,21 +126,11 @@
     }
     }
     .informations{
-      position: relative;
-      float: right;
-      width: 15%;
       min-width: 250px;
+      position: relative;
       height: 100%;
-      &::after{
-        content: " ";
-        height: 0;
-        width: 1px;
-        display: block;
-        position: absolute;
-        top: 0;
-        margin-right: 1rem;
-        left:0;
-      }
+      padding-left: 40px;
+      opacity: 0;
      }
   }
   &.is-active{
@@ -149,10 +144,19 @@
       }
     }
     .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;
-        transition: 1s 0.9s height ease;
         height: 100%;
+        transition: 1s 0.9s height ease;
       }
     }
   }