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 .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 > header a {
+#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

@@ -13,4 +13,27 @@ $.when( $.ready ).then(function() {
           // 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",
+    "/css/app.css": "/css/app.css?id=74fa6f50c8e0638a2f2c",
-    "/js/app.js": "/js/app.js?id=0414ea2af14fb9cba08a"
+    "/js/app.js": "/js/app.js?id=86f37c024211b755c39e"
 }

resources/assets/js/app.js

@@ -4,4 +4,27 @@ $.when( $.ready ).then(function() {
           // 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');
+        
+    });
 });

resources/assets/sass/_app.scss

@@ -21,30 +21,60 @@ body {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		display:none;
+		position: absolute;
+		width: 340px;
+		left: -340px;
+		transition: all .35s ease-in-out;
+		background: rgba(0,0,0, 0.7);
+		color: white;
+		z-index: 2;
 	}
 	.content {
 		flex-grow: 1;
 		display: flex;
 		flex-direction: column;
-	> header {
+		.appheader {
 			background: rgba(0,0,0, 0.4);
-		padding: 20px;
 			text-align: center;
+			position:absolute;
+			height: 58px;
+			width: 100%;
+			top: -58px;
+			transition: all .35s ease-in-out;
+			z-index: 1;
+			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;
+			}
+			li {
+				display: inline-block;
+				border-right: 1px solid rgba(0,0,0,0.6);
+				border-left: 1px solid rgba(255,255,255,0.1);
+
+			}
 			a {
+				display: inline-block;
 				color: white;
 				text-decoration: none;
+				padding: 20px;
 			}
 		}
 
 	}
 	main {
-		padding: 50px;
+		padding: 10px;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		flex: 1;
 		position: relative;
+		flex-wrap: wrap;
+		align-content: center;
 		.config {
 			position: absolute;
 			bottom: 0;
@@ -58,11 +88,57 @@ body {
 		}
 	}
 }
-
+.item-container {
+	width: 340px;
+	transition: all .35s ease-in-out;	
+}
+#app {
+	&.header {
+		.appheader {
+			top: 0;
+		}
+		.item-container {
+			width: 280px;
+		}
+		.item, .add-item {
+			transform: scale(0.8);
+			opacity: 0.7;
+		}
+	}
+	&.sidebar {
+		nav {
+			left: 0;
+		}
+	}
+}
+.add-item {
+	width: 300px;
+	height: 130px;
+	margin: 20px;
+	flex: 0 0 300px;
+	border-radius: 6px;
+	padding: 20px;
+	border: 4px dashed rgba(255,255,255,0.7);
+	box-shadow: 0 0 20px 2px rgba(0,0,0,0.3);
+	color: white;
+	overflow: hidden;
+	position: relative;	
+	display: none;
+	outline: 1px solid transparent;
+	a {
+		display: block;
+		width: 100%;
+		text-align: center;
+		line-height: 90px;
+		color: white;
+		font-size: 19px;
+	}
+}
 .item {
 	width: 300px;
 	height: 130px;
 	margin: 20px;
+	flex: 0 0 300px;
 	background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25));
 	border-radius: 6px;
 	padding: 20px;
@@ -72,6 +148,8 @@ body {
 	color: white;
 	overflow: hidden;
 	position: relative;
+	transition: all .35s ease-in-out;
+	outline: 1px solid transparent;
 	&:after {
 		content: "";
 		position: absolute;

resources/views/add.blade.php

@@ -0,0 +1,3 @@
+                    <section class="add-item">
+                        <a id="add-item" href="">Pin item to dash</a>
+                    </section>

resources/views/app.blade.php

@@ -20,8 +20,11 @@
                 </ul>
             </nav>
             <div class="content">
-                <header>
+                <header class="appheader">
-                    <a href="{{ route('items.index') }}">Items</a>
+                    <ul>
+                        <li><a href="{{ route('dash') }}">Dash</a></li><li>
+                            <a href="{{ route('items.index') }}">Items</a></li>
+                    </ul>
                 </header>
                 <main>
                     @if ($message = Session::get('success'))
@@ -40,7 +43,7 @@
                     @endif
                     
                     @yield('content')
-                    <a class="config" href=""><i class="fas fa-cogs"></i></a>
+                    <a id="config-button" class="config" href=""><i class="fas fa-cogs"></i></a>
                 </main>
 
             </div>

resources/views/item.blade.php

@@ -0,0 +1,12 @@
+                    <section class="item-container">
+                        <div class="item" style="background-color: {{ $app->colour }}">
+                            @if($app->icon)
+                            <img src="" />
+                            @else
+                            <i class="fas fa-app-store-ios"></i>
+                            @endif
+                            {{ $app->title }}
+                            Item
+                            <a class="link" href="{{ $app->url }}"><i class="fas fa-arrow-alt-to-right"></i></a>
+                        </div>
+                    </section>

resources/views/welcome.blade.php

@@ -3,19 +3,12 @@
 @section('content')
     @if($apps->first())
         @foreach($apps as $app)
-                    <section class="item" style="background-color: {{ $app->colour }}">
+            @include('item')
-                        @if($app->icon)
-                        <img src="" />
-                        @else
-                        <i class="fas fa-app-store-ios"></i>
-                        @endif
-                        {{ $app->title }}
-                        Item
-                        <a class="link" href="{{ $app->url }}"><i class="fas fa-arrow-alt-to-right"></i></a>
-                    </section>
         @endforeach
+        @include('add')
     @else
         There are currently no Applications, add one here
+        @include('add')
     @endif
 
 

routes/web.php

@@ -11,7 +11,7 @@
 |
 */
 
-Route::get('/', 'ItemController@dash');
+Route::get('/', 'ItemController@dash')->name('dash');
 
 Route::resources([
     'items' => 'ItemController',