Create basic layout of the Agent's sidebar menu.

app.css

@@ -7,7 +7,8 @@
 }
 
 #sidebar-menu ul {
-  padding-left: 15px;
+  padding: 0;
+  margin: 0;
 }
 
 #sidebar-menu ul li {
@@ -15,6 +16,36 @@
   padding: 0;
 }
 
+.sidebar__level-1, .sidebar__level-2 {
+  padding-left: 15px;
+}
+
+.sidebar__level-2 {
+  margin-left: 15px;
+}
+
+.sidebar__level-1 {
+  background-color: #ccc;
+  font-size: 2rem;
+  line-height: 3rem;
+  margin-top: 2rem;
+}
+
+.menu--top .sidebar__level-1:first-child {
+  margin: 0;
+}
+
+.menu--bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.menu--bottom .sidebar__level-1 {
+  background-color: transparent;
+}
+
 #main-content {
   margin-left: 250px;
 }
@@ -62,6 +93,11 @@
   max-width: 100%;
 }
 
+.owl-carousel {
+  max-width: 991px;
+  margin: auto;
+}
+
 .owl-carousel .item img {
   display: block;
   width: 100%;

app.html

@@ -59,19 +59,32 @@
     <script type="text/javascript" src="./app.js"></script>
 
     <script type="text/x-handlebars-template" id="sidebar-menu--source">
-      <ul>
-        {{#each menu}}
-          <li><i class='fa fa-{{icon}}'></i> {{name}}
-            {{#if children}}
-              <ul>
-                {{#each children}}
-                  <li><i class="fa fa-{{icon}}"></i> {{name}}</li>
-                {{/each}}
-              </ul>
-            {{/if}}
-          </li>
-        {{/each}}
-      </ul>
+      {{#if menu}}
+        <ul class="menu--top">
+          {{#each menu}}
+            <li><div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
+              {{#if children}}
+                <ul>
+                  {{#each children}}
+                    <li>
+                      <div class="sidebar__level-2">
+                        <i class="fa fa-{{icon}}"></i> {{name}}
+                      </div>
+                    </li>
+                  {{/each}}
+                </ul>
+              {{/if}}
+            </li>
+          {{/each}}
+        </ul>
+      {{/if}}
+      {{#if menuBottom}}
+        <ul class="menu--bottom">
+          {{#each menuBottom}}
+            <li><div class="sidebar__level-1"><i class='fa fa-{{icon}}'></i> {{name}}</div>
+          {{/each}}
+        </ul>
+      {{/if}}
     </script>
   </body>
 </html>

app.js

@@ -106,7 +106,9 @@ var menuObject = {
           'name': 'Trackpoing'
         }
       ]
-    },
+    }
+  ],
+  menuBottom: [
     {
       'icon': 'gear',
       'name': 'Settings'