import React, { useState } from 'react'; import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { State, useStoreState } from 'easy-peasy'; import tw from 'twin.macro'; import styled from 'styled-components/macro'; import { ApplicationStore } from '@/state'; import { AdminContext } from '@/state/admin'; import NotFound from '@/components/screens/NotFound'; import OverviewContainer from '@/components/admin/overview/OverviewContainer'; import SettingsContainer from '@/components/admin/settings/SettingsContainer'; import ApiKeysContainer from '@/components/admin/api/ApiKeysContainer'; import DatabasesContainer from '@/components/admin/databases/DatabasesContainer'; import NewDatabaseContainer from '@/components/admin/databases/NewDatabaseContainer'; import DatabaseEditContainer from '@/components/admin/databases/DatabaseEditContainer'; import NodesContainer from '@/components/admin/nodes/NodesContainer'; import NewNodeContainer from '@/components/admin/nodes/NewNodeContainer'; import NodeEditContainer from '@/components/admin/nodes/NodeEditContainer'; import LocationsContainer from '@/components/admin/locations/LocationsContainer'; import LocationEditContainer from '@/components/admin/locations/LocationEditContainer'; import ServersContainer from '@/components/admin/servers/ServersContainer'; import NewServerContainer from '@/components/admin/servers/NewServerContainer'; import ServerEditContainer from '@/components/admin/servers/ServerEditContainer'; import UsersContainer from '@/components/admin/users/UsersContainer'; import NewUserContainer from '@/components/admin/users/NewUserContainer'; import UserEditContainer from '@/components/admin/users/UserEditContainer'; import RolesContainer from '@/components/admin/roles/RolesContainer'; import RoleEditContainer from '@/components/admin/roles/RoleEditContainer'; import NestsContainer from '@/components/admin/nests/NestsContainer'; import NestEditContainer from '@/components/admin/nests/NestEditContainer'; import MountsContainer from '@/components/admin/mounts/MountsContainer'; import MountEditContainer from '@/components/admin/mounts/MountEditContainer'; const Sidebar = styled.div<{ collapsed?: boolean }>` ${tw`fixed h-screen flex flex-col items-center flex-shrink-0 bg-neutral-900 overflow-x-hidden transition-all duration-250 ease-linear`}; ${props => props.collapsed ? 'width: 70px' : 'width: 287px'}; & > div.header { ${tw`h-16 w-full flex flex-col items-center justify-center mt-1 mb-3 select-none cursor-pointer`}; } & > div.wrapper { ${tw`w-full flex flex-col px-4`}; & > span { height: 18px; ${tw`font-header font-medium text-xs text-neutral-300 whitespace-nowrap uppercase ml-4 mb-1 select-none`}; ${props => props.collapsed && tw`opacity-0`}; &:not(:first-of-type) { ${tw`mt-4`}; } } & > a { ${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none`}; ${props => props.collapsed ? tw`justify-center` : tw`px-4`}; & > svg { ${tw`h-6 w-6 flex flex-shrink-0`}; } & > span { ${props => props.collapsed ? tw`hidden` : tw`font-header font-medium text-lg whitespace-nowrap leading-none ml-3`}; } &:hover { ${tw`text-neutral-50`}; } &:active, &.active { ${tw`text-neutral-50 bg-neutral-800 rounded`}; } } } & > a { ${props => !props.collapsed && tw`hidden`}; } & > div.user { ${tw`h-16 w-full flex items-center justify-center bg-neutral-700`}; ${props => !props.collapsed && tw`mt-auto px-5`}; & > div, a { ${props => props.collapsed && tw`hidden`}; } } `; const AdminRouter = ({ location, match }: RouteComponentProps) => { const user = useStoreState((state: State) => state.user.data); const applicationName = useStoreState((state: ApplicationStore) => state.settings.data!.name); const [ collapsed, setCollapsed ] = useState(); return (
{ setCollapsed(!collapsed); } }> { !collapsed ?

{applicationName}

: {'Pterodactyl }
Administration Overview Settings API Keys Management Databases Locations Nodes Servers Users Roles Service Management Nests Mounts
Profile Picture
{user?.firstName} {user?.lastName} {user?.roleName}
{/* */} {/* */}
); }; export default (props: RouteComponentProps) => ( );