Implements new ServerRouter

This commit is contained in:
Angelillo15 2023-08-04 19:23:13 +02:00
parent da0be11d29
commit aa13ce4698
1 changed files with 31 additions and 23 deletions

View File

@ -11,7 +11,6 @@ import Spinner from '@/components/elements/Spinner';
import { NotFound, ServerError } from '@/components/elements/ScreenBlock'; import { NotFound, ServerError } from '@/components/elements/ScreenBlock';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import { useStoreState } from 'easy-peasy'; import { useStoreState } from 'easy-peasy';
import SubNavigation from '@/components/elements/SubNavigation';
import InstallListener from '@/components/server/InstallListener'; import InstallListener from '@/components/server/InstallListener';
import ErrorBoundary from '@/components/elements/ErrorBoundary'; import ErrorBoundary from '@/components/elements/ErrorBoundary';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -20,6 +19,8 @@ import { useLocation } from 'react-router';
import ConflictStateRenderer from '@/components/server/ConflictStateRenderer'; import ConflictStateRenderer from '@/components/server/ConflictStateRenderer';
import PermissionRoute from '@/components/elements/PermissionRoute'; import PermissionRoute from '@/components/elements/PermissionRoute';
import routes from '@/routers/routes'; import routes from '@/routers/routes';
import Sidebar from '@/components/Sidebar';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
export default () => { export default () => {
const match = useRouteMatch<{ id: string }>(); const match = useRouteMatch<{ id: string }>();
@ -74,31 +75,38 @@ export default () => {
) : ( ) : (
<> <>
<CSSTransition timeout={150} classNames={'fade'} appear in> <CSSTransition timeout={150} classNames={'fade'} appear in>
<SubNavigation> <Sidebar>
<div>
{routes.server {routes.server
.filter((route) => !!route.name) .filter((route) => !!route.name)
.map((route) => .map((route) =>
route.permission ? ( route.permission ? (
<Can key={route.path} action={route.permission} matchAny> <Can key={route.path} action={route.permission} matchAny>
<NavLink to={to(route.path, true)} exact={route.exact}> <NavLink to={to(route.path, true)} exact={route.exact}>
<div className='icon'>
<FontAwesomeIcon icon={route.iconProp as IconProp} />
</div>
{route.name} {route.name}
</NavLink> </NavLink>
</Can> </Can>
) : ( ) : (
<NavLink key={route.path} to={to(route.path, true)} exact={route.exact}> <NavLink key={route.path} to={to(route.path, true)} exact={route.exact}>
{route.name} <div className='icon'>
<FontAwesomeIcon icon={route.iconProp as IconProp} />
</div>
{route.name}{' '}
</NavLink> </NavLink>
) )
)} )}
{rootAdmin && ( {rootAdmin && (
// eslint-disable-next-line react/jsx-no-target-blank // eslint-disable-next-line react/jsx-no-target-blank
<a href={`/admin/servers/view/${serverId}`} target={'_blank'}> <a href={`/admin/servers/view/${serverId}`} target={'_blank'}>
<div className='icon'>
<FontAwesomeIcon icon={faExternalLinkAlt} /> <FontAwesomeIcon icon={faExternalLinkAlt} />
</div>
Admin
</a> </a>
)} )}
</div> </Sidebar>
</SubNavigation>
</CSSTransition> </CSSTransition>
<InstallListener /> <InstallListener />
<TransferListener /> <TransferListener />