Get server console page rendering (mostly) correctly

resources/scripts/routers/DashboardRouter.tsx

@@ -5,35 +5,8 @@ import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
 import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import NotFound from '@/components/screens/NotFound';
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
-import config from '@/../../tailwind.config.js';
 import TransitionRouter from '@/TransitionRouter';
-
-const SubNavigation = styled.div`
-    ${tw`w-full bg-neutral-700 shadow`};
-    
-    & > div {
-        ${tw`flex items-center text-sm mx-auto px-2`};
-        max-width: 1200px;
-        
-        & > a, & > div {
-            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
-            
-            &:not(:first-of-type) {
-                ${tw`ml-2`};
-            }
-            
-            &:active, &:hover {
-                ${tw`text-neutral-100`};
-            }
-            
-            &:active, &:hover, &.active {
-                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
-            }
-        }
-    }
-`;
+import SubNavigation from '@/components/elements/SubNavigation';
 
 export default ({ location }: RouteComponentProps) => (
     <>

resources/scripts/routers/ServerRouter.tsx

@@ -23,6 +23,7 @@ import NotFound from '@/components/screens/NotFound';
 import { useStoreState } from 'easy-peasy';
 import useServer from '@/plugins/useServer';
 import ScreenBlock from '@/components/screens/ScreenBlock';
+import SubNavigation from '@/components/elements/SubNavigation';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const { rootAdmin } = useStoreState(state => state.user.data!);
@@ -71,8 +72,8 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                 :
                 <>
                     <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
-                        <div id={'sub-navigation'}>
-                            <div className={'items'}>
+                        <SubNavigation>
+                            <div>
                                 <NavLink to={`${match.url}`} exact>Console</NavLink>
                                 <Can action={'file.*'}>
                                     <NavLink to={`${match.url}/files`}>File Manager</NavLink>
@@ -93,7 +94,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                     <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                                 </Can>
                             </div>
-                        </div>
+                        </SubNavigation>
                     </CSSTransition>
                     {(installing && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${server.id}`)))) ?
                         <ScreenBlock