import { State, useStoreState } from 'easy-peasy'; import React from 'react'; import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom'; import tw, { styled } from 'twin.macro'; import OverviewContainer from '@/components/admin/overview/OverviewContainer'; import SettingsContainer from '@/components/admin/settings/SettingsContainer'; 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 NodeRouter from '@/components/admin/nodes/NodeRouter'; 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 ServerRouter from '@/components/admin/servers/ServerRouter'; import UsersContainer from '@/components/admin/users/UsersContainer'; import NewUserContainer from '@/components/admin/users/NewUserContainer'; import UserRouter from '@/components/admin/users/UserRouter'; 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 NewEggContainer from '@/components/admin/nests/NewEggContainer'; import EggRouter from '@/components/admin/nests/eggs/EggRouter'; import MountsContainer from '@/components/admin/mounts/MountsContainer'; import NewMountContainer from '@/components/admin/mounts/NewMountContainer'; import MountEditContainer from '@/components/admin/mounts/MountEditContainer'; import { NotFound } from '@/components/elements/ScreenBlock'; import { usePersistedState } from '@/plugins/usePersistedState'; import { ApplicationStore } from '@/state'; import { AdminContext } from '@/state/admin'; import { breakpoint } from '@/theme'; const Sidebar = styled.div<{ collapsed?: boolean }>` ${tw`fixed h-screen hidden md: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 { ${tw`h-10 w-full flex flex-row items-center text-neutral-300 cursor-pointer select-none`}; ${props => props.collapsed ? tw`justify-center px-4` : tw`px-8`}; & > 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`}; } } & > div.user { ${tw`h-16 w-full flex items-center bg-neutral-700 justify-center`}; & > div, a { ${props => props.collapsed && tw`hidden`}; } } `; const Container = styled.div<{ collapsed?: boolean }>` ${tw`w-full flex flex-col items-center transition-all duration-250 ease-linear`}; ${props => props.collapsed ? breakpoint('md')`padding-left: 70px` : breakpoint('md')`padding-left: 287px`}; `; const AdminRouter = ({ location, match }: RouteComponentProps) => { const user = useStoreState((state: State) => state.user.data); const applicationName = useStoreState((state: ApplicationStore) => state.settings.data!.name); const uuid = useStoreState(state => state.user.data!.uuid); const [ collapsed, setCollapsed ] = usePersistedState(`${uuid}:admin_sidebar_collapsed`, false); return (
{ setCollapsed(!collapsed); } }> { !collapsed ?

{applicationName}

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