Add basic navigation bar

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>
+);

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>
+);