Add navigation to vue, improve responsiveness of the design

Author: DaneEveritt

resources/assets/scripts/components/core/Navigation.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="nav">
+        <div class="logo">
+            <router-link :to="{ name: 'dashboard' }">
+                Pterodactyl
+            </router-link>
+        </div>
+        <div class="menu">
+            <ul>
+                <li>
+                    <router-link :to="{ name: 'dashboard' }">
+                        <server-icon aria-label="Server dashboard"/>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link :to="{ name: 'account' }">
+                        <user-icon aria-label="Profile management"/>
+                    </router-link>
+                </li>
+                <li>
+                    <a :href="this.route('admin.index')">
+                        <settings-icon aria-label="Administrative controls"/>
+                    </a>
+                </li>
+                <li>
+                    <a :href="this.route('auth.logout')">
+                        <log-out-icon aria-label="Sign out"/>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'navigation',
+        components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon }
+    };
+</script>

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -1,26 +1,29 @@
 <template>
     <div>
-        <flash container="mt-4"/>
-        <div class="server-search animate fadein">
-            <input type="text"
-                   :placeholder="$t('dashboard.index.search')"
-                   @input="onChange"
-                   v-model="search"
-                   ref="search"
-            />
-        </div>
-        <div v-if="this.loading" class="my-4 animate fadein">
-            <div class="text-center h-16">
-                <span class="spinner spinner-xl"></span>
+        <navigation/>
+        <div class="container">
+            <flash container="mt-4"/>
+            <div class="server-search animate fadein">
+                <input type="text"
+                       :placeholder="$t('dashboard.index.search')"
+                       @input="onChange"
+                       v-model="search"
+                       ref="search"
+                />
+            </div>
+            <div v-if="this.loading" class="my-4 animate fadein">
+                <div class="text-center h-16">
+                    <span class="spinner spinner-xl"></span>
+                </div>
             </div>
+            <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
+                <server-box
+                        v-for="(server, index) in servers.models"
+                        v-bind:key="index"
+                        v-bind:server="server"
+                />
+            </transition-group>
         </div>
-        <transition-group class="w-full m-auto mt-4 animate fadein sm:flex flex-wrap content-start" v-else>
-            <server-box
-                    v-for="(server, index) in servers.models"
-                    v-bind:key="index"
-                    v-bind:server="server"
-            />
-        </transition-group>
     </div>
 </template>
 
@@ -30,10 +33,11 @@
     import _ from 'lodash';
     import Flash from '../Flash';
     import ServerBox from './ServerBox';
+    import Navigation from '../core/Navigation';
 
     export default {
         name: 'dashboard',
-        components: { ServerBox, Flash },
+        components: { Navigation, ServerBox, Flash },
         data: function () {
             return {
                 backgroundedAt: DateTime.local(),

resources/assets/scripts/routes.js

@@ -17,7 +17,7 @@ export const routes = [
         }
     },
 
-    { name : 'index', path: '/', component: Dashboard },
+    { name : 'dashboard', path: '/', component: Dashboard },
     { name : 'account', path: '/account', component: Account },
     { name : 'account.api', path: '/account/api', component: Account },
     { name : 'account.security', path: '/account/security', component: Account },

resources/assets/styles/components/miscellaneous.css

@@ -49,11 +49,7 @@ code {
     @apply .pb-4;
 
     @screen smx {
-        @apply .w-1/2 .pr-4;
-
-        &:nth-of-type(2n) {
-            padding-right: 0;
-        }
+        @apply .w-full;
     }
 
     @screen md {

resources/assets/styles/components/navigation.css

@@ -4,11 +4,18 @@
 
     & > .logo {
         @apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2;
+
+        & a {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        @screen xsx {
+            @apply .hidden
+        }
     }
 
     & > .menu {
-        @apply .float-right .mx-8 .inline-block;
-
         & > ul {
             @apply .list-reset;
             & > li {
@@ -19,10 +26,21 @@
 
                     &:hover {
                         @apply .bg-blue-dark;
+                    }
 
+                    & .feather {
+                        @apply .h-4;
                     }
                 }
             }
         }
+
+        @screen xsx {
+            @apply .w-full .text-center;
+        }
+
+        @screen sm {
+            @apply .float-right .mx-8 .inline-block;
+        }
     }
 }

resources/assets/styles/main.css

@@ -25,5 +25,11 @@
  * Assorted Other CSS
  */
 body {
-  @apply .font-sans;
+    @apply .font-sans;
+}
+
+.container {
+    @screen xsx {
+        @apply .px-2;
+    }
 }

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -1,40 +1,8 @@
 @extends('templates/wrapper')
 
-@section('above-container')
-    <div class="nav">
-        <div class="logo">
-            Pterodactyl
-        </div>
-        <div class="menu">
-            <ul>
-                <li>
-                    <a href="#">
-                        <span>Your Servers</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <span>Admin</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <span>dane</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="{{ route('auth.logout') }}">
-                        <span>Logout</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-@endsection
-
 @section('container')
     <router-view></router-view>
-    <div class="w-full m-auto mt-0">
+    <div class="w-full m-auto mt-0 container">
         <p class="text-right text-grey-dark text-xs">
             {!! trans('strings.copyright', ['year' => date('Y')]) !!}
         </p>

resources/themes/pterodactyl/templates/wrapper.blade.php

@@ -16,11 +16,13 @@
         @include('layouts.scripts')
     </head>
     <body class="{{ $css['body'] ?? 'bg-grey-lighter' }}">
-        @yield('above-container')
-        <div class="container" id="pterodactyl">
-            @yield('container')
-        </div>
-        @yield('below-container')
+        @section('content')
+            @yield('above-container')
+            <div id="pterodactyl">
+                @yield('container')
+            </div>
+            @yield('below-container')
+        @show
         @section('scripts')
             {!! $asset->js('assets/scripts/bundle.js') !!}
         @show

tailwind.js

@@ -172,6 +172,7 @@ module.exports = {
         'lg': '992px',
         'xl': '1200px',
 
+        'xsx': {'max': '575px'},
         'smx': {'max': '767px'},
         'mdx': {'max': '991px'},
         'lgx': {'max': '1999px'},