fixes

public/css/app.css

@@ -260,7 +260,14 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
   height: 100%;
-  display: none;
+  position: absolute;
+  width: 340px;
+  left: -340px;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  z-index: 2;
 }
 
 #app .content {
@@ -276,19 +283,43 @@ body {
           flex-direction: column;
 }
 
-#app .content > header {
+#app .content .appheader {
   background: rgba(0, 0, 0, 0.4);
-  padding: 20px;
   text-align: center;
+  position: absolute;
+  height: 58px;
+  width: 100%;
+  top: -58px;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+  z-index: 1;
 }
 
-#app .content > header a {
+#app .content .appheader ul {
+  display: inline-block;
+  list-style: none;
+  height: 58px;
+  border-left: 1px solid rgba(0, 0, 0, 0.6);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  margin: 0;
+  padding: 0;
+}
+
+#app .content .appheader li {
+  display: inline-block;
+  border-right: 1px solid rgba(0, 0, 0, 0.6);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+#app .content .appheader a {
+  display: inline-block;
   color: white;
   text-decoration: none;
+  padding: 20px;
 }
 
 #app main {
-  padding: 50px;
+  padding: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -302,6 +333,10 @@ body {
       -ms-flex: 1;
           flex: 1;
   position: relative;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -ms-flex-line-pack: center;
+      align-content: center;
 }
 
 #app main .config {
@@ -316,10 +351,66 @@ body {
   color: white;
 }
 
+.item-container {
+  width: 340px;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+}
+
+#app.header .appheader {
+  top: 0;
+}
+
+#app.header .item-container {
+  width: 280px;
+}
+
+#app.header .item,
+#app.header .add-item {
+  -webkit-transform: scale(0.8);
+          transform: scale(0.8);
+  opacity: 0.7;
+}
+
+#app.sidebar nav {
+  left: 0;
+}
+
+.add-item {
+  width: 300px;
+  height: 130px;
+  margin: 20px;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 300px;
+          flex: 0 0 300px;
+  border-radius: 6px;
+  padding: 20px;
+  border: 4px dashed rgba(255, 255, 255, 0.7);
+  -webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
+  color: white;
+  overflow: hidden;
+  position: relative;
+  display: none;
+  outline: 1px solid transparent;
+}
+
+.add-item a {
+  display: block;
+  width: 100%;
+  text-align: center;
+  line-height: 90px;
+  color: white;
+  font-size: 19px;
+}
+
 .item {
   width: 300px;
   height: 130px;
   margin: 20px;
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 300px;
+          flex: 0 0 300px;
   background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));
   background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
   border-radius: 6px;
@@ -330,6 +421,9 @@ body {
   color: white;
   overflow: hidden;
   position: relative;
+  -webkit-transition: all .35s ease-in-out;
+  transition: all .35s ease-in-out;
+  outline: 1px solid transparent;
 }
 
 .item:after {

public/js/app.js

@@ -12,5 +12,28 @@ $.when( $.ready ).then(function() {
         var hueb = new Huebee( elem, {
           // options
         });
-      });
+     });
+    $('#app').on('click', '#config-button', function(e) {
+        e.preventDefault();
+        var app = $('#app');
+        var active = (app.hasClass('header'));
+        app.toggleClass('header');
+        if(active) {
+            $('.add-item').hide();
+            $('#app').removeClass('sidebar');
+        } else {
+            setTimeout(
+                function() 
+                {
+                  $('.add-item').fadeIn();
+                }, 350);
+    
+        }
+    }).on('click', '#add-item', function(e) {
+        e.preventDefault();
+        var app = $('#app');
+        var active = (app.hasClass('sidebar'));
+        app.toggleClass('sidebar');
+        
+    });
 });

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=4d970da293df2200c19d",
-    "/js/app.js": "/js/app.js?id=0414ea2af14fb9cba08a"
+    "/css/app.css": "/css/app.css?id=74fa6f50c8e0638a2f2c",
+    "/js/app.js": "/js/app.js?id=86f37c024211b755c39e"
 }