_sidebar.scss in ovh-jekyll-doc-theme-0.2.0

- old
+ new

@@ -2,22 +2,24 @@
 $sidebar-color-secondary: $oui-color-rhino;
 
 @keyframes openNavEntry {
     from {
         left: -25%;
+        opacity: 0;
     }
     to {
-        left: 0
+        left: 0;
+        opacity: 1;
     }
 }
 
 @keyframes selectedNavEntry {
     from {
         transform: rotate(0);
     }
     to {
-        transform: rotate(90);
+        transform: rotate(90deg);
     }
 }
 
 .navbar {
     min-height: 0;
@@ -75,12 +77,14 @@
         color: white;
     }
 
     &__entries,
     &__subentries {
+        width: 100%;
         padding: 0;
         margin: 0;
+        overflow-x: hidden;
     }
 
     &__entries {
         width: 80%;
         height: calc(100% - #{$space-l3});
@@ -99,10 +103,11 @@
 
     &__subentries {
         height: 0;
         position: relative;
         overflow-y: auto;
+        background-color: $sidebar-color-secondary;
 
         &--active {
             height: auto;
 
             .navbar__link--lvl-2 {
@@ -111,13 +116,15 @@
             }
         }
     }
 
     &__entry {
+        width: 100%;
         list-style-type: none;
         padding: 0;
         margin: 0;
+        overflow-x: hidden;
     }
 
     &__link {
         display: block;
         padding: $space-base;
@@ -127,11 +134,11 @@
         &--lvl {
             &-2 {
                 padding-left: $space-l2;
                 position: relative;
                 left: -25%;
-                background-color: $sidebar-color-secondary;
+                opacity: 0;
             }
         }
 
         &:hover,
         &:active,
@@ -144,9 +151,10 @@
         &-chevron {
             margin-right: .8rem;
             font-size: .8rem;
             color: white;
             opacity: .6;
+            transform: rotate(0);
 
             &--active {
                 animation: selectedNavEntry .1s ease-in .1s;
             }
         }