diff --git a/resources/scripts/components/admin/SubNavigation.tsx b/resources/scripts/components/admin/SubNavigation.tsx
new file mode 100644
index 000000000..b3e2da712
--- /dev/null
+++ b/resources/scripts/components/admin/SubNavigation.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+
+export const SubNavigation = styled.div`
+ ${tw`h-12 flex flex-row items-center border-b border-neutral-700`};
+
+ & > div {
+ ${tw`h-full flex flex-col flex-shrink-0 justify-center`};
+
+ & > a {
+ ${tw`h-full flex flex-row items-center text-neutral-300 border-t px-4`};
+ border-top-color: transparent !important;
+
+ & > svg {
+ ${tw`h-6 w-6 mr-2`};
+ }
+
+ & > span {
+ ${tw`text-base whitespace-nowrap`};
+ }
+
+ &:active, &.active {
+ ${tw`text-primary-300 border-b border-primary-300`};
+ }
+ }
+ }
+`;
+
+export const SubNavigationLink = ({ to, name, children }: { to: string, name: string, children: React.ReactNode }) => {
+ return (
+
+
+ {children}
+ {name}
+
+
+ );
+};
diff --git a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx
index b4e4227d4..87ed4d8c0 100644
--- a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
import tw from 'twin.macro';
-import { useRouteMatch } from 'react-router-dom';
+import { Route, Switch, useRouteMatch } from 'react-router-dom';
import { action, Action, Actions, createContextStore, useStoreActions } from 'easy-peasy';
import { Node } from '@/api/admin/nodes/getNodes';
import getNode from '@/api/admin/nodes/getNode';
@@ -8,6 +9,7 @@ import AdminContentBlock from '@/components/admin/AdminContentBlock';
import Spinner from '@/components/elements/Spinner';
import FlashMessageRender from '@/components/FlashMessageRender';
import { ApplicationStore } from '@/state';
+import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
interface ctx {
node: Node | undefined;
@@ -23,6 +25,7 @@ export const Context = createContextStore({
});
const NodeEditContainer = () => {
+ const location = useLocation();
const match = useRouteMatch<{ id?: string }>();
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes);
@@ -57,14 +60,68 @@ const NodeEditContainer = () => {
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ About
+
+
+
+ Settings
+
+
+
+ Configuration
+
+
+
+ Allocations
+
+
+
+ Servers
+
+
);
};
diff --git a/resources/scripts/routers/AdminRouter.tsx b/resources/scripts/routers/AdminRouter.tsx
index fd44470f9..67c6d1214 100644
--- a/resources/scripts/routers/AdminRouter.tsx
+++ b/resources/scripts/routers/AdminRouter.tsx
@@ -108,7 +108,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
{ setCollapsed(!collapsed); } }>
{ !collapsed ?
-
{applicationName}
+
{applicationName}
:
}
@@ -227,7 +227,6 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
@@ -235,7 +234,6 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {