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 = () => {
-
+
-
+
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
+
+ Test
+
);
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) => (
-
+
@@ -18,5 +18,5 @@ export default ({ location }: RouteComponentProps) => (
-
+
);
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) => (
-
+export default ({ match, location }: RouteComponentProps) => (
+
+
+
+
+ Console
+ File Manager
+ Databases
+ User Management
+
+
+
-
+
-
+
);