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 ( -
+

{node.name}

{node.uuid}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

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}

: {'Pterodactyl } @@ -227,7 +227,6 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => { @@ -235,7 +234,6 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {