Improve theming and layout of the sidebar menu.

app.css

@@ -1,21 +1,26 @@
 #sidebar-menu {
-  background-color: #eee;
+  background-color: #f5f5f5;
+  border-right: 1px solid #ccc;
   position: fixed;
   overflow-y: scroll;
   width: 250px;
   height: 100%;
 }
 
-#sidebar-menu ul {
+ul {
   padding: 0;
   margin: 0;
 }
 
-#sidebar-menu ul li {
+li {
   list-style: none;
   padding: 0;
 }
 
+.sidebar__level-1 {
+  padding: .5rem 1rem;
+}
+
 .sidebar__level-1, .sidebar__level-2 {
   padding-left: 15px;
 }
@@ -24,17 +29,71 @@
   margin-left: 15px;
 }
 
-.sidebar__level-1 {
+.sidebar__level-1:hover,
-  background-color: #ccc;
+.sidebar__level-2--item:hover {
-  font-size: 2rem;
+  cursor: pointer;
-  line-height: 3rem;
+  background-color: rgba(0, 0, 0, 0.05);
-  margin-top: 2rem;
 }
 
-.menu--top .sidebar__level-1:first-child {
+#sidebar-menu .sidebar__level-2--item {
+  padding: 0 20px 0 0;
+}
+
+#sidebar-menu .sidebar__level-2--item .fa.pull-right {
+  position: relative;
+  top: 2px;
+}
+
+#sidebar-menu .fa-star-o {
+  color: #f5f5f5;
+}
+
+#sidebar-menu .sidebar__level-2--item:hover .fa-star-o {
+  color: #000;
+}
+
+#sidebar-menu .sidebar__level-2--item .fa-star-o:hover {
+  color: #000;
+}
+
+#sidebar-menu .fa-star {
+  color: #666;
+}
+
+.sidebar__level-1 {
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+.sidebar__level-1--item {
+  margin-top: 0;
+}
+
+.sidebar__level-1--item:nth-child(1) {
   margin: 0;
 }
 
+#sidebar-menu .sidebar__actions--list {
+  margin-top: 1rem;
+}
+
+.sidebar__action--item {
+  text-align: center;
+}
+
+.sidebar__action {
+  width: 80%;
+}
+
+.sidebar__level-2--item.active {
+  background-color: #555;
+  color: #fff;
+}
+
+.sidebar__level-2--item.active i {
+  display: none;
+}
+
 .menu--bottom {
   position: absolute;
   bottom: 0;
@@ -44,6 +103,7 @@
 
 .menu--bottom .sidebar__level-1 {
   background-color: transparent;
+  padding: 1rem;
 }
 
 #main-content {
@@ -85,10 +145,6 @@
   cursor: pointer;
 }
 
-.unk--wrapper {
-  /*margin-top: 10rem;*/
-}
-
 .uhk {
   max-width: 100%;
 }
@@ -104,6 +160,14 @@
   height: auto;
 }
 
-.btn:not(.btn-primary) {
+.sidebar__level-1 .fa.fa-chevron-down {
-  border: none;
+  margin-right: 1rem;
+  font-size: 1.5rem;
+  position: relative;
+  top: .5rem;
+  display: none;
+}
+
+.sidebar__level-1:hover .fa.fa-chevron-down {
+  display: inline-block;
 }

app.html

@@ -61,19 +61,46 @@
     <script type="text/x-handlebars-template" id="sidebar-menu--source">
       {{#if menu}}
         <ul class="menu--top">
-          {{#each menu}}
+          {{#each menu as |menuValue menuKey|}}
-            <li><div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
+            <li class="sidebar__level-1--item">
+              <div class="sidebar__level-1">
+                <i class='fa fa-{{icon}}'></i> {{name}} <!--<span class="small-text">collapse</span>-->
+                {{#if expandable}}
+                  <a href="#" class="btn btn-default pull-right btn-sm">
+                    <i class="fa fa-plus"></i>
+                  </a>
+                {{/if}}
+                <i class="fa fa-chevron-down pull-right" style=""></i>
+              </div>
               {{#if children}}
                 <ul>
                   {{#each children}}
-                    <li>
+                    <li class="sidebar__level-2--item {{classes}}">
                       <div class="sidebar__level-2">
-                        <i class="fa fa-{{icon}}"></i> {{name}}
+                        {{name}}
+                        {{#if menuValue.hasDefaults}}
+                          {{#if isDefault}}
+                            <i class="fa fa-star pull-right"></i>
+                          {{else}}
+                            <i class="fa fa-star-o pull-right"></i>
+                          {{/if}}
+                        {{/if}}
                       </div>
                     </li>
                   {{/each}}
                 </ul>
               {{/if}}
+              {{#if actions}}
+                <ul class="sidebar__actions--list">
+                  {{#each actions}}
+                    <li class="sidebar__action--item">
+                      <a href="#" class="btn btn-default btn-xs sidebar__action">
+                        <i class="fa fa-{{icon}}"></i> {{name}}
+                      </a>
+                    </li>
+                  {{/each}}
+                </ul>
+              {{/if}}
             </li>
           {{/each}}
         </ul>
@@ -81,7 +108,9 @@
       {{#if menuBottom}}
         <ul class="menu--bottom">
           {{#each menuBottom}}
-            <li><div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
+            <li class="sidebar__level-2--item">
+              <div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
+            </li>
           {{/each}}
         </ul>
       {{/if}}

app.js

@@ -27,19 +27,19 @@ var menuObject = {
   menu: [
     {
       icon: 'keyboard-o',
-      name: 'Keyboard',
+      name: 'Keymaps',
+      hasDefaults: true,
+      expandable: true,
       children: [
         {
-          icon: 'plus-circle',
+          icon: '',
-          name: 'Add new keymap'
+          name: 'Factory keymap',
+          isDefault: true
         },
         {
           icon: '',
-          name: 'Factory keymap'
+          name: 'QWERTY',
-        },
+          classes: 'active'
-        {
-          icon: '',
-          name: 'QWERTY'
         },
         {
           icon: '',
@@ -56,17 +56,20 @@ var menuObject = {
         {
           icon: '',
           name: 'Mortal Kombat X'
-        },
+        }
-      ]
+      ],
+      // actions: [
+      //   {
+      //     icon: 'plus',
+      //     name: 'Add new keymap'
+      //   }
+      // ]
     },
     {
       icon: 'play',
       name: 'Macros',
+      expandable: true,
       children: [
-        {
-          icon: 'plus-circle',
-          name: 'Add new macro'
-        },
         {
           icon: '',
           name: 'Macro1'
@@ -82,8 +85,14 @@ var menuObject = {
         {
           icon: '',
           name: 'Macro4'
-        },
+        }
-      ]
+      ],
+      // actions: [
+      //   {
+      //     icon: 'plus',
+      //     name: 'Add new macro'
+      //   }
+      // ]
     },
     {
       'icon': 'puzzle-piece',