From a5a60f58626155ea8281f98d67e507a7a42781c4 Mon Sep 17 00:00:00 2001
From: Nejc Zdovc <NejcZdovc@users.noreply.github.com>
Date: Fri, 21 Oct 2016 19:10:57 +0200
Subject: [PATCH] Added highlight for menu items (#130)

Closes #129
---
 src/components/side-menu/side-menu.component.html | 14 +++++++-------
 src/components/side-menu/side-menu.component.scss |  6 +++++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/side-menu/side-menu.component.html b/src/components/side-menu/side-menu.component.html
index 4e2545e2..e93e4412 100644
--- a/src/components/side-menu/side-menu.component.html
+++ b/src/components/side-menu/side-menu.component.html
@@ -9,7 +9,7 @@
         </div>
         <ul [@toggler]="animation.keymap">
             <li *ngFor="let keymap of keymaps$ | async" class="sidebar__level-2--item">
-                <div class="sidebar__level-2">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/keymap', keymap.abbreviation]">{{keymap.name}}</a>
                     <i *ngIf="keymap.isDefault" class="fa fa-star sidebar__fav"></i>
                 </div>
@@ -26,7 +26,7 @@
         </div>
         <ul [@toggler]="animation.macro">
             <li *ngFor="let macro of macros$ | async" class="sidebar__level-2--item">
-                <div class="sidebar__level-2">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
                 </div>
             </li>
@@ -39,22 +39,22 @@
         </div>
         <ul [@toggler]="animation.addon">
             <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
-                <div class="sidebar__level-2">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/add-on', 'Key cluster']">Key cluster</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
-                <div class="sidebar__level-2">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/add-on', 'Trackball']">Trackball</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
-                <div class="sidebar__level-2">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/add-on', 'Touchpad']">Touchpad</a>
                 </div>
             </li>
             <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
-                <div class="sidebar__level-2">
+                <div class="sidebar__level-2" [routerLinkActive]="['active']">
                     <a [routerLink]="['/add-on', 'Trackpoint']">Trackpoint</a>
                 </div>
             </li>
@@ -62,7 +62,7 @@
     </li>
 </ul>
 <ul class="menu--bottom">
-    <li class="sidebar__level-1--item">
+    <li class="sidebar__level-1--item" [routerLinkActive]="['active']">
         <a class="sidebar__level-1" [routerLink]="['/settings']">
             <i class="fa fa-gear"></i> Settings
         </a>
diff --git a/src/components/side-menu/side-menu.component.scss b/src/components/side-menu/side-menu.component.scss
index 504a8326..3e6d6fed 100644
--- a/src/components/side-menu/side-menu.component.scss
+++ b/src/components/side-menu/side-menu.component.scss
@@ -112,10 +112,14 @@ ul {
 
     // General hover over menu items.
     &__level-1,
-    &__level-2--item {
+    &__level-2 {
         &:hover {
             background-color: rgba(0, 0, 0, 0.05);
         }
+
+        &.active {
+            background-color: rgba(0, 0, 0, 0.18);
+        }
     }
 
     &__fav {