From a28a9887c1aa4071144e00b88f8d3f58dd4f99cb Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 3 Feb 2019 16:29:08 -0800
Subject: [PATCH] Rearrange the navigation bar to be laid out more normally

---
 .../scripts/components/core/Navigation.ts     | 114 +++++++++---------
 .../scripts/components/server/Server.ts       |   6 +-
 .../assets/styles/components/navigation.css   |  42 +++----
 resources/assets/styles/main.css              |   6 -
 tailwind.js                                   |   1 +
 5 files changed, 73 insertions(+), 96 deletions(-)

diff --git a/resources/assets/scripts/components/core/Navigation.ts b/resources/assets/scripts/components/core/Navigation.ts
index a25287199..dc2b123c8 100644
--- a/resources/assets/scripts/components/core/Navigation.ts
+++ b/resources/assets/scripts/components/core/Navigation.ts
@@ -71,70 +71,64 @@ export default Vue.component('navigation', {
     },
 
     template: `
-        <div class="nav flex">
-            <div class="logo flex-1">
-                <router-link :to="{ name: 'dashboard' }">
-                    Pterodactyl
-                </router-link>
-            </div>
-            <div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
-                <input type="text" class="search-input" id="searchInput" placeholder="Search..."
-                       :class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
-                       v-on:focus="searchActive = true"
-                       v-on:input="search"
-                       v-model="searchTerm"
-                />
-                <div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
-                    <div v-if="loadingResults">
-                        <a href="#">
-                            <div class="flex items-center">
-                                <div class="flex-1">
-                                    <span class="text-sm text-grey-darker">Loading...</span>
+        <div class="nav flex flex-grow">
+            <div class="flex flex-1 justify-center items-center container">
+                <div class="logo">
+                    <router-link :to="{ name: 'dashboard' }">
+                        Pterodactyl
+                    </router-link>
+                </div>
+                <div class="menu flex-1">
+                    <router-link :to="{ name: 'dashboard' }">
+                        <icon name="server" aria-label="Server dashboard" class="h-4 self-center"/>
+                    </router-link>
+                    <router-link :to="{ name: 'account' }">
+                        <icon name="user" aria-label="Profile management" class="h-4"/>
+                    </router-link>
+                    <a :href="this.route('admin.index')">
+                        <icon name="settings" aria-label="Administrative controls" class="h-4"/>
+                    </a>
+                </div>
+                <div class="search-box flex-none" v-if="$route.name !== 'dashboard'" ref="searchContainer">
+                    <input type="text" class="search-input" id="searchInput" placeholder="Search..."
+                           :class="{ 'has-search-results': ((servers.length > 0 && searchTerm.length >= 3) || loadingResults) && searchActive }"
+                           v-on:focus="searchActive = true"
+                           v-on:input="search"
+                           v-model="searchTerm"
+                    />
+                    <div class="search-results select-none" :class="{ 'hidden': (servers.length === 0 && !loadingResults) || !searchActive || searchTerm.length < 3 }">
+                        <div v-if="loadingResults">
+                            <a href="#">
+                                <div class="flex items-center">
+                                    <div class="flex-1">
+                                        <span class="text-sm text-grey-darker">Loading...</span>
+                                    </div>
+                                    <div class="flex-none">
+                                        <span class="spinner spinner-relative"></span>
+                                    </div>
                                 </div>
-                                <div class="flex-none">
-                                    <span class="spinner spinner-relative"></span>
+                            </a>
+                        </div>
+                        <div v-else v-for="server in servers" :key="server.identifier">
+                            <router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
+                                <div class="flex items-center">
+                                    <div class="flex-1">
+                                        <span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
+                                        <span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
+                                    </div>
+                                    <div class="flex-none">
+                                        <span class="pillbox bg-indigo">{{ server.node }}</span>
+                                    </div>
                                 </div>
-                            </div>
-                        </a>
-                    </div>
-                    <div v-else v-for="server in servers" :key="server.identifier">
-                        <router-link :to="{ name: 'server', params: { id: server.identifier }}" v-on:click.native="searchActive = false">
-                            <div class="flex items-center">
-                                <div class="flex-1">
-                                    <span class="font-bold text-grey-darkest">{{ server.name }}</span><br />
-                                    <span class="font-light text-grey-dark text-sm" v-if="server.description.length > 0">{{ server.description }}</span>
-                                </div>
-                                <div class="flex-none">
-                                    <span class="pillbox bg-indigo">{{ server.node }}</span>
-                                </div>
-                            </div>
-                        </router-link>
+                            </router-link>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <div class="menu flex-none">
-                <ul>
-                    <li>
-                        <router-link :to="{ name: 'dashboard' }">
-                            <icon name="server" aria-label="Server dashboard" class="h-4"/>
-                        </router-link>
-                    </li>
-                    <li>
-                        <router-link :to="{ name: 'account' }">
-                            <icon name="user" aria-label="Profile management" class="h-4"/>
-                        </router-link>
-                    </li>
-                    <li>
-                        <a :href="this.route('admin.index')">
-                            <icon name="settings" aria-label="Administrative controls" class="h-4"/>
-                        </a>
-                    </li>
-                    <li>
-                        <a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
-                            <icon name="log-out" aria-label="Sign out" class="h-4"/>
-                        </a>
-                    </li>
-                </ul>
+                <div class="menu">
+                    <a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
+                        <icon name="log-out" aria-label="Sign out" class="h-4"/>
+                    </a>
+                </div>
             </div>
         </div>
     `
diff --git a/resources/assets/scripts/components/server/Server.ts b/resources/assets/scripts/components/server/Server.ts
index 1450f1c32..d5a9b4e43 100644
--- a/resources/assets/scripts/components/server/Server.ts
+++ b/resources/assets/scripts/components/server/Server.ts
@@ -71,13 +71,13 @@ export default Vue.component('server', {
         <div>
             <navigation></navigation>
             <flash class="m-6"/>
-            <div v-if="loadingServerData">
+            <div v-if="loadingServerData" class="container">
                 <div class="mt-6 h-16">
                     <div class="spinner spinner-xl spinner-thick blue"></div>
                 </div>
             </div>
-            <div v-else>
-                <div class="m-6 flex flex-no-shrink rounded animate fadein">
+            <div v-else class="container">
+                <div class="my-6 flex flex-no-shrink rounded animate fadein">
                     <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
                         <div class="mr-6">
                             <div class="p-6 text-center bg-white border rounded">
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index 74a50d3a6..d8ebc9be5 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/resources/assets/styles/components/navigation.css
@@ -2,8 +2,8 @@
     @apply .bg-blue .border-b .border-t .border-blue-darkest;
     height: 56px;
 
-    & > .logo {
-        @apply .mx-8 .font-sans .font-thin .text-3xl .text-white .inline-block .pt-2;
+    & .logo {
+        @apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;
 
         & a {
             color: inherit;
@@ -15,11 +15,12 @@
         }
     }
 
-    & > .search-box {
+    & .search-box {
+        @apply .mr-2;
+
         & > .search-input {
-            @apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
-            width: 26rem;
-            opacity: 0.7;
+            @apply .text-sm .p-2 .ml-8 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest .w-96;
+            opacity: 0.9;
             transition: ease-in-out opacity 150ms;
 
             &:focus {
@@ -34,8 +35,7 @@
         }
 
         & .search-results {
-            @apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .mx-3 .z-50;
-            width: 26rem;
+            @apply .absolute .bg-grey-lightest .border .border-blue-darkest .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
 
             & a {
                 @apply .block .no-underline .p-2 .rounded;
@@ -47,28 +47,16 @@
         }
     }
 
-    & > .menu {
-        & > ul {
-            @apply .list-reset;
-            & > li {
-                @apply .inline-block;
-                & > a {
-                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
+    & .menu {
+        @apply .flex .h-full .items-center;
 
-                    &:hover {
-                        @apply .bg-blue-dark;
-                    }
-                }
+        & > a {
+            @apply .block .flex .self-stretch .items-center .no-underline .text-grey-lighter .font-light .text-sm .px-5;
+
+            &:hover {
+                @apply .bg-blue-dark;
             }
         }
-
-        @screen xsx {
-            @apply .w-full .text-center;
-        }
-
-        @screen sm {
-            @apply .float-right .mr-8 .inline-block;
-        }
     }
 }
 
diff --git a/resources/assets/styles/main.css b/resources/assets/styles/main.css
index b084b13f9..9b34b7e6a 100644
--- a/resources/assets/styles/main.css
+++ b/resources/assets/styles/main.css
@@ -31,9 +31,3 @@
 body {
     @apply .font-sans;
 }
-
-.container {
-    @screen xsx {
-        @apply .px-2;
-    }
-}
diff --git a/tailwind.js b/tailwind.js
index 9dd41bc33..8bfd9017c 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -454,6 +454,7 @@ module.exports = {
         '32': '8rem',
         '48': '12rem',
         '64': '16rem',
+        '96': '24rem',
         '1/2': '50%',
         '1/3': '33.33333%',
         '2/3': '66.66667%',