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'>
{route.name} <FontAwesomeIcon icon={route.iconProp as IconProp} />
</NavLink> </div>
</Can>
) : (
<NavLink key={route.path} to={to(route.path, true)} exact={route.exact}>
{route.name} {route.name}
</NavLink> </NavLink>
) </Can>
)} ) : (
{rootAdmin && ( <NavLink key={route.path} to={to(route.path, true)} exact={route.exact}>
// eslint-disable-next-line react/jsx-no-target-blank <div className='icon'>
<a href={`/admin/servers/view/${serverId}`} target={'_blank'}> <FontAwesomeIcon icon={route.iconProp as IconProp} />
<FontAwesomeIcon icon={faExternalLinkAlt} /> </div>
</a> {route.name}{' '}
</NavLink>
)
)} )}
</div> {rootAdmin && (
</SubNavigation> // eslint-disable-next-line react/jsx-no-target-blank
<a href={`/admin/servers/view/${serverId}`} target={'_blank'}>
<div className='icon'>
<FontAwesomeIcon icon={faExternalLinkAlt} />
</div>
Admin
</a>
)}
</Sidebar>
</CSSTransition> </CSSTransition>
<InstallListener /> <InstallListener />
<TransferListener /> <TransferListener />