Ensure icon on sidebar bullets is rotated when link is active (#1157)

* fix: ensure sidebar links icon is rotated for active links * Add animation for sidebar link icon rotation
iterative · Apr 16, 2020 · 7d259fb · 7d259fb
1 parent 2c18509
commit 7d259fb
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.module.css b/src/components/Documentation/Layout/SidebarMenu/styles.module.css
@@ -75,13 +75,19 @@
     height: 5px;
     width: 8px;
     background: url('/img/triangle_dark.svg') no-repeat center center;
+  }
+}
 
-    &.active {
-      transform: rotate(-90deg);
-    }
+@keyframes rotateIcon {
+  100% {
+    transform: rotate(-90deg);
   }
 }
 
+.active::before {
+  animation: rotateIcon 0.5s forwards;
+}
+
 .footer {
   margin-top: 30px;
   padding-bottom: 30px;