From 109bed4f7d59a2edc5b0c7bf8f56ac1228649a47 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 28 Jun 2019 22:49:08 -0700
Subject: [PATCH] Add basic navigation bar to server view

---
 .../assets/styles/components/navigation.css   | 26 +++++++++++++++++++
 resources/scripts/TransitionRouter.tsx        |  2 +-
 resources/scripts/components/App.tsx          |  4 +--
 .../components/server/ServerConsole.tsx       |  4 ++-
 resources/scripts/routers/DashboardRouter.tsx |  4 +--
 resources/scripts/routers/ServerRouter.tsx    | 20 ++++++++++----
 6 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index 58579dda3..5db937ed8 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/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');
+            }
+        }
+    }
+}
diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx
index 630e44023..cdb7a1d80 100644
--- a/resources/scripts/TransitionRouter.tsx
+++ b/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<{
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index d0935f3b4..880bca8a0 100644
--- a/resources/scripts/components/App.tsx
+++ b/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>
diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index ae409fd00..aae89742c 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
 export default () => (
-    null
+    <div className={'my-10'}>
+        Test
+    </div>
 );
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index 699521157..d9312fd8c 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/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>
 );
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index d7124c176..0e8543690 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/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>
 );