mocked server page and better navigation and overall layout

resources/assets/styles/components/buttons.css

@@ -1,5 +1,5 @@
 .btn {
-  @apply .rounded;
+  @apply .rounded .p-2;
 
   /**
    * Button Colors
@@ -12,9 +12,14 @@
     }
   }
 
-  /**
-   * Button Sizes
-   */
+  &.btn-red {
+    @apply .bg-red .border-red-dark .border .text-white;
+
+    &:hover:enabled {
+        @apply .bg-red-dark .border-red-darker;
+     }
+   }
+  /* Button Sizes */
   &.btn-jumbo {
     @apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
   }

resources/assets/styles/components/containers.css

@@ -0,0 +1 @@
+

resources/assets/styles/components/miscellaneous.css

@@ -46,7 +46,7 @@ code {
  * Flex boxes for server listing on user dashboard.
  */
 .server-box {
-    @apply .pb-4;
+    @apply .block .pb-4 .no-underline;
 
     @screen smx {
         @apply .w-1/2 .pr-4;

resources/assets/styles/components/navigation.css

@@ -1,4 +1,24 @@
 .nav {
+    @apply .flex;
+
+    a {
+        @apply .py-6 .px-6 .text-white .no-underline;
+
+    &:hover {
+         @apply .bg-blue-dark;
+     }
+
+     &.router-link-active {
+        @apply .bg-blue-dark;
+      }
+
+    &:last-child {
+         @apply mr-0;
+     }
+    }
+}
+
+/*.nav {
     @apply .bg-blue;
     height: 48px;
 
@@ -25,4 +45,20 @@
             }
         }
     }
+}*/
+
+.sidenav {
+    @apply .mb-2;
+
+    a {
+        @apply .block .py-3 .px-8 .text-grey-darkest .no-underline;
+
+        &:hover {
+             @apply .border-r-4 .border-blue-lightest;
+         }
+
+        &.router-link-exact-active {
+             @apply .text-blue .border-r-4 .border-blue;
+         }
+    }
 }

resources/assets/styles/main.css

@@ -10,6 +10,7 @@
 @import "components/animations.css";
 @import "components/authentication.css";
 @import "components/buttons.css";
+@import "components/containers.css";
 @import "components/forms.css";
 @import "components/miscellaneous.css";
 @import "components/navigation.css";