Add data attributes on menu items.

The view on the right pane will be switched based on this.

app.html

@@ -159,7 +159,7 @@
               {{#if children}}
                 <ul>
                   {{#each children}}
-                    <li class="sidebar__level-2--item {{classes}}">
+                    <li class="sidebar__level-2--item {{classes}}" data-name="{{name}}" data-content="{{menuValue.dataContent}}" data-abbrev="{{abbrev}}">
                       <div class="sidebar__level-2">
                         {{name}}
                         {{#if menuValue.hasDefaults}}

app.js

@@ -39,32 +39,39 @@ var menuObject = {
       name: 'Keymaps',
       hasDefaults: true,
       expandable: true,
+      dataContent: '.keymap--edit',
       children: [
         {
           icon: '',
           name: 'Factory keymap',
+          abbrev: 'FTY',
           isDefault: true
         },
         {
           icon: '',
           name: 'QWERTY',
+          abbrev: 'QTY',
           classes: 'active'
         },
         {
           icon: '',
-          name: 'Dvorak'
+          name: 'Dvorak',
+          abbrev: 'DVR',
         },
         {
           icon: '',
-          name: 'Colemak'
+          name: 'Colemak',
+          abbrev: 'COL',
         },
         {
           icon: '',
-          name: 'VIM'
+          name: 'VIM',
+          abbrev: 'VIM',
         },
         {
           icon: '',
-          name: 'Mortal Kombat X'
+          name: 'Mortal Kombat X',
+          abbrev: 'MKX',
         }
       ],
       // actions: [
@@ -78,6 +85,7 @@ var menuObject = {
       icon: 'play',
       name: 'Macros',
       expandable: true,
+      dataContent: '.macro--edit',
       children: [
         {
           icon: '',