StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add basic navigation bar to server view

Browse source
This commit is contained in:
Dane Everitt 2019-06-28 22:49:08 -07:00
parent 8ac8a370f8
commit 109bed4f7d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 49 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/TransitionRouter.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Route, Switch } from 'react-router';
import { Route } from 'react-router';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
type Props = Readonly<{

4
resources/scripts/components/App.tsx
View file

@ -41,9 +41,9 @@ const App = () => {
<div className={'mx-auto w-auto'}>
<BrowserRouter basename={'/'}>
<Switch>
<Route path="/" component={DashboardRouter}/>
<Route path="/server/:id" component={ServerRouter}/>
<Route path="/auth" component={AuthenticationRouter}/>
<Route path="/server/:id/" component={ServerRouter}/>
<Route path="/" component={DashboardRouter}/>
</Switch>
</BrowserRouter>
</div>

4
resources/scripts/components/server/ServerConsole.tsx
View file

@ -1,5 +1,7 @@
import React from 'react';
export default () => (
null
<div className={'my-10'}>
Test
</div>
);

4
resources/scripts/routers/DashboardRouter.tsx
View file

@ -7,7 +7,7 @@ import DashboardContainer from '@/components/dashboard/DashboardContainer';
import TransitionRouter from '@/TransitionRouter';
export default ({ location }: RouteComponentProps) => (
<div>
<React.Fragment>
<NavigationBar/>
<TransitionRouter>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
@ -18,5 +18,5 @@ export default ({ location }: RouteComponentProps) => (
</Switch>
</div>
</TransitionRouter>
</div>
</React.Fragment>
);

20
resources/scripts/routers/ServerRouter.tsx
View file

@ -1,18 +1,28 @@
import * as React from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import NavigationBar from '@/components/NavigationBar';
import ServerConsole from '@/components/server/ServerConsole';
import TransitionRouter from '@/TransitionRouter';
export default ({ location }: RouteComponentProps) => (
<div>
export default ({ match, location }: RouteComponentProps) => (
<React.Fragment>
<NavigationBar/>
<div id={'sub-navigation'}>
<div className={'mx-auto'} style={{ maxWidth: '1200px' }}>
<div className={'items'}>
<NavLink to={`${match.url}`} exact>Console</NavLink>
<NavLink to={`${match.url}/files`}>File Manager</NavLink>
<NavLink to={`${match.url}/databases`}>Databases</NavLink>
<NavLink to={`${match.url}/users`}>User Management</NavLink>
</div>
</div>
</div>
<TransitionRouter>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
<Switch location={location}>
<Route path={`/`} component={ServerConsole} exact/>
<Route path={`${match.path}`} component={ServerConsole} exact/>
</Switch>
</div>
</TransitionRouter>
</div>
</React.Fragment>
);