From 7d259fb8a480c46e26a42577524efd61945e1b61 Mon Sep 17 00:00:00 2001
From: Kevin Ndung'u <kevgathuku@users.noreply.github.com>
Date: Thu, 16 Apr 2020 20:00:01 +0300
Subject: [PATCH] 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
---
 .../Layout/SidebarMenu/styles.module.css             | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.module.css b/src/components/Documentation/Layout/SidebarMenu/styles.module.css
index 23764e27d8..7d1437041d 100644
--- 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;