Add basic navigation bar to server view

Author: DaneEveritt

resources/assets/styles/components/navigation.css

@@ -36,3 +36,29 @@
         }
     }
 }
+
+#sub-navigation {
+    @apply .w-full .bg-neutral-700 .shadow;
+
+    .items {
+        @apply .flex .items-center .text-sm .mx-2;
+
+        & > a, & > div {
+            @apply .inline-block .py-3 .px-4 .text-neutral-300 .no-underline;
+            transition: color 150ms linear, box-shadow 150ms ease-in;
+
+            &:not(:first-of-type) {
+                @apply .ml-2;
+            }
+
+            &.active, &:hover {
+                @apply .text-neutral-100;
+                box-shadow: inset 0 -2px config('colors.cyan-700');
+            }
+
+            &.active {
+                box-shadow: inset 0 -2px config('colors.cyan-500');
+            }
+        }
+    }
+}

resources/scripts/TransitionRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch } from 'react-router';
+import { Route } from 'react-router';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 type Props = Readonly<{

resources/scripts/components/App.tsx

@@ -41,9 +41,9 @@ const App = () => {
                 <div className={'mx-auto w-auto'}>
                     <BrowserRouter basename={'/'}>
                         <Switch>
-                            <Route path="/" component={DashboardRouter}/>
+                            <Route path="/server/:id" component={ServerRouter}/>
                             <Route path="/auth" component={AuthenticationRouter}/>
-                            <Route path="/server/:id/" component={ServerRouter}/>
+                            <Route path="/" component={DashboardRouter}/>
                         </Switch>
                     </BrowserRouter>
                 </div>

resources/scripts/components/server/ServerConsole.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
 export default () => (
-    null
+    <div className={'my-10'}>
+        Test
+    </div>
 );

resources/scripts/routers/DashboardRouter.tsx

@@ -7,7 +7,7 @@ import DashboardContainer from '@/components/dashboard/DashboardContainer';
 import TransitionRouter from '@/TransitionRouter';
 
 export default ({ location }: RouteComponentProps) => (
-    <div>
+    <React.Fragment>
         <NavigationBar/>
         <TransitionRouter>
             <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
@@ -18,5 +18,5 @@ export default ({ location }: RouteComponentProps) => (
                 </Switch>
             </div>
         </TransitionRouter>
-    </div>
+    </React.Fragment>
 );

resources/scripts/routers/ServerRouter.tsx

@@ -1,18 +1,28 @@
 import * as React from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import NavigationBar from '@/components/NavigationBar';
 import ServerConsole from '@/components/server/ServerConsole';
 import TransitionRouter from '@/TransitionRouter';
 
-export default ({ location }: RouteComponentProps) => (
-    <div>
+export default ({ match, location }: RouteComponentProps) => (
+    <React.Fragment>
         <NavigationBar/>
+        <div id={'sub-navigation'}>
+            <div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
+                <div className={'items'}>
+                    <NavLink to={`${match.url}`} exact>Console</NavLink>
+                    <NavLink to={`${match.url}/files`}>File Manager</NavLink>
+                    <NavLink to={`${match.url}/databases`}>Databases</NavLink>
+                    <NavLink to={`${match.url}/users`}>User Management</NavLink>
+                </div>
+            </div>
+        </div>
         <TransitionRouter>
             <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
                 <Switch location={location}>
-                    <Route path={`/`} component={ServerConsole} exact/>
+                    <Route path={`${match.path}`} component={ServerConsole} exact/>
                 </Switch>
             </div>
         </TransitionRouter>
-    </div>
+    </React.Fragment>
 );