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 {