add active Link behaviour to sidebar

Author: dpatanin

src/scss/components/_sidebar.scss

@@ -72,7 +72,11 @@ span {
     overflow-y: auto;
 	color: $white;
 	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
-	transition: all 0.3s;
+    transition: all 0.3s;
+    .active-Link {
+        color: $white;
+        background: $highlight;
+    }
 	&.active {
 		min-width: 10px;
 		max-width: 10px;

src/templates/scanner.js

@@ -14,7 +14,10 @@ const Scanner = ({ data }) => {
           <ul class="list-unstyled components">
             {scanner.map(scanner => (
               <li>
-                <Link to={scanner.node.frontmatter.path}>
+                <Link
+                  to={scanner.node.frontmatter.path}
+                  activeClassName="active-Link"
+                >
                   {scanner.node.frontmatter.title}
                 </Link>
               </li>