Switching to ng2 side menu (#65)

Closes #63

src/components/sidemenu/side-menu.component.html

@@ -0,0 +1,87 @@
+<ul class="menu--top">
+    <li class="sidebar__level-1--item">
+        <div class="sidebar__level-1">
+            <i class="fa fa-keyboard-o"></i> Keymaps
+            <a href="#" class="btn btn-default pull-right btn-sm">
+                <i class="fa fa-plus"></i>
+            </a>
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, keymapElement)"></i>
+        </div>
+        <ul #keymapElement>
+            <li *ngFor="let keymap of keymaps" class="sidebar__level-2--item">
+                <div class="sidebar__level-2">
+                    <a [routerLink]="['/keymap', keymap.id]">{{keymap.name}}</a>
+                    <i class="fa fa-star pull-right"></i>
+                </div>
+            </li>
+        </ul>
+    </li>
+    <li class="sidebar__level-1--item">
+        <div class="sidebar__level-1">
+            <i class="fa fa-play"></i> Macros
+            <a href="#" class="btn btn-default pull-right btn-sm">
+                <i class="fa fa-plus"></i>
+            </a>
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, macroElement)"></i>
+        </div>
+        <ul #macroElement>
+            <li *ngFor="let macro of macros" class="sidebar__level-2--item">
+                <div class="sidebar__level-2">
+                    <a [routerLink]="['/macro', macro.id]">{{macro.name}}</a>
+                    <i class="fa fa-star pull-right"></i>
+                </div>
+            </li>
+        </ul>
+    </li>
+    <li class="sidebar__level-1--item">
+        <div class="sidebar__level-1">
+            <i class="fa fa-puzzle-piece"></i> Add-on modules
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, addonElement)"></i>
+        </div>
+        <ul #addonElement>
+            <li class="sidebar__level-2--item" data-name="Key cluster" data-abbrev="">
+                <div class="sidebar__level-2">
+                    Key cluster
+                </div>
+            </li>
+            <li class="sidebar__level-2--item" data-name="Trackball" data-abbrev="">
+                <div class="sidebar__level-2">
+                    Trackball
+                </div>
+            </li>
+            <li class="sidebar__level-2--item" data-name="Toucpad" data-abbrev="">
+                <div class="sidebar__level-2">
+                    Toucpad
+                </div>
+            </li>
+            <li class="sidebar__level-2--item" data-name="Trackpoint" data-abbrev="">
+                <div class="sidebar__level-2">
+                    Trackpoint
+                </div>
+            </li>
+        </ul>
+    </li>
+    <li class="sidebar__level-1--item">
+        <div class="sidebar__level-1">
+            <i class="fa fa-exclamation-triangle "></i> Legacy
+            <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, legacyElement)"></i>
+        </div>
+        <ul #legacyElement>
+            <li class="sidebar__level-2--item" data-name="Keymap legacy" data-abbrev="QTY">
+                <div class="sidebar__level-2">
+                    <a [routerLink]="['/legacy', 'keymap']">Keymap HTML</a>
+                </div>
+            </li>
+            <li class="sidebar__level-2--item " data-name="Macro legacy" data-abbrev="DVR">
+                <div class="sidebar__level-2">
+                    <a [routerLink]="['/legacy', 'macro']">Macro</a>
+                </div>
+            </li>
+        </ul>
+    </li>
+</ul>
+<ul class="menu--bottom">
+    <li class="sidebar__level-1--item">
+        <div class="sidebar__level-1"><i class="fa fa-gear"></i> Settings</div>
+    </li>
+</ul>