Add basic navigation bar

Author: DaneEveritt

package.json

@@ -1,6 +1,9 @@
 {
     "name": "pterodactyl-panel",
     "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.19",
+        "@fortawesome/free-solid-svg-icons": "^5.9.0",
+        "@fortawesome/react-fontawesome": "^0.1.4",
         "@hot-loader/react-dom": "^16.8.6",
         "axios": "^0.18.0",
         "brace": "^0.11.1",

resources/assets/styles/components/navigation.css

@@ -1,117 +1,38 @@
-.nav {
-    @apply .bg-primary-600 .border-b .border-t .border-primary-700;
-    height: 56px;
+#navigation {
+    @apply .w-full .bg-neutral-900 .shadow-md;
 
-    & .logo {
-        @apply .mr-8 .font-sans .font-thin .text-3xl .text-white .inline-block;
-
-        & a {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        @screen xsx {
-            @apply .hidden;
-        }
-    }
-
-    & .search-box {
-        @apply .mr-2;
-
-        & > .search-input {
-            @apply .text-sm .p-2 .ml-8 .rounded .border .border-primary-600 .bg-white .text-neutral-900 .w-96;
-            transition: border 150ms ease-in;
-
-            &:focus {
-                @apply .border-primary-700;
-            }
-
-            &.has-search-results {
-                @apply .border-b-0 .rounded-b-none;
-            }
-        }
-
-        & .search-results {
-            @apply .absolute .bg-white .border .border-primary-700 .border-t-0 .rounded .rounded-t-none .p-2 .ml-8 .z-50 .w-96;
-
-            & a {
-                @apply .block .no-underline .p-2 .rounded;
-
-                &:not(.no-hover):hover {
-                    @apply .bg-neutral-50;
-                }
-            }
-        }
+    & > div {
+        @apply .mx-auto .w-full .flex .items-center;
     }
 
-    & .menu {
-        @apply .flex .h-full .items-center;
+    & #logo {
+        @apply .flex-1;
 
         & > a {
-            transition: background-color 150ms linear;
-            @apply .block .flex .self-stretch .items-center .no-underline .text-white .font-light .text-sm .px-5;
+            @apply .text-2xl .font-header .px-4 .no-underline .text-neutral-200;
+            transition: color 150ms linear;
 
             &:hover {
-                @apply .bg-primary-700;
+                @apply .text-neutral-100;
             }
         }
     }
-}
-
-.sidenav {
-    ul {
-        @apply .list-reset;
 
-        & li {
-            @apply .block;
+    & .right-navigation {
+        @apply .flex .h-full .items-center .justify-center;
 
-            & > a {
-                transition: border-left-color 250ms linear, color 250ms linear;
-                @apply .block .px-4 .py-3 .border-l-3 .border-neutral-100 .no-underline .text-neutral-400 .font-medium;
-
-                &:hover, &.router-link-exact-active, &.router-link-active {
-                    @apply .text-neutral-800;
-                }
-
-                &.router-link-exact-active, &.router-link-active {
-                    @apply .border-primary-500 .cursor-default;
-                }
+        & > a {
+            @apply .flex .items-center .h-full .no-underline .text-neutral-300 .px-6;
+            transition: background-color 150ms linear, color 150ms linear, box-shadow 150ms ease-in;
 
-                &::-moz-focus-inner {
-                    @apply .border-none;
-                }
+            &.active, &:hover {
+                @apply .text-neutral-100 .bg-black;
+                box-shadow: inset 0 -2px config('colors.cyan-700');
             }
 
-            /**
-              * Because of how the router works the first sidebar link is always active
-              * since that is the container for all of the server things. Override the
-              * style for active links if its the first one and not an exact route match.
-              */
-            &:first-of-type > a {
-                &.router-link-active:not(.router-link-exact-active) {
-                    @apply .border-neutral-100 .text-neutral-400 .cursor-pointer;
-                }
+            &.active {
+                box-shadow: inset 0 -2px config('colors.cyan-500');
             }
         }
     }
 }
-/*
-.sidenav {
-    @apply .py-2;
-
-    a {
-        @apply .block .py-3 .px-6 .text-neutral-900 .no-underline .border .border-transparent;
-
-        &:hover, &.router-link-exact-active {
-            @apply .border-neutral-400 .bg-neutral-50;
-
-            border-left: 1px solid transparent;
-            border-right: 1px solid transparent;
-        }
-
-        &.router-link-exact-active + a:hover {
-            border-top: 1px solid transparent;
-        }
-    }
-}
-*/

resources/scripts/components/App.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import AuthenticationRouter from '@/routers/AuthenticationRouter';
-import AccountRouter from '@/routers/AccountRouter';
 import ServerOverviewContainer from '@/components/ServerOverviewContainer';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
 import TransitionRouter from '@/TransitionRouter';
+import DashboardRouter from '@/routers/DashboardRouter';
 
 interface WindowWithUser extends Window {
     PterodactylUser?: {
@@ -41,9 +41,8 @@ const App = () => {
             <Router basename={'/'}>
                 <div className={'mx-auto w-auto'}>
                     <TransitionRouter basename={'/'}>
-                        <Route exact path="/" component={ServerOverviewContainer}/>
+                        <Route path="/" component={DashboardRouter}/>
                         <Route path="/auth" component={AuthenticationRouter}/>
-                        <Route path="/account" component={AccountRouter}/>
                     </TransitionRouter>
                 </div>
             </Router>

resources/scripts/components/NavigationBar.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLayerGroup } from '@fortawesome/free-solid-svg-icons/faLayerGroup';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons/faUserCircle';
+import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
+import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
+
+export default () => (
+    <div id={'navigation'}>
+        <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
+            <div id={'logo'}>
+                <Link to={'/'}>
+                    Pterodactyl
+                </Link>
+            </div>
+            <div className={'right-navigation'}>
+                <NavLink to={'/'} exact={true}>
+                    <FontAwesomeIcon icon={faLayerGroup}/>
+                </NavLink>
+                <NavLink to={'/account'}>
+                    <FontAwesomeIcon icon={faUserCircle}/>
+                </NavLink>
+                {process.env.NODE_ENV !== 'production' &&
+                <NavLink to={'/design'}>
+                    <FontAwesomeIcon icon={faSwatchbook}/>
+                </NavLink>
+                }
+                <NavLink to={'/auth/logout'}>
+                    <FontAwesomeIcon icon={faSignOutAlt}/>
+                </NavLink>
+            </div>
+        </div>
+    </div>
+);

…nts/account/AccountOverviewContainer.tsx …s/dashboard/AccountOverviewContainer.tsxresources/scripts/components/account/AccountOverviewContainer.tsx renamed to resources/scripts/components/dashboard/AccountOverviewContainer.tsx resources/scripts/components/account/AccountOverviewContainer.tsx renamed to resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ContentBox from '@/components/elements/ContentBox';
-import UpdatePasswordForm from '@/components/account/forms/UpdatePasswordForm';
-import UpdateEmailAddressForm from '@/components/account/forms/UpdateEmailAddressForm';
+import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
+import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
 
 export default () => {
     return (

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+    <div>
+        <p>Dashboard</p>
+    </div>
+);