dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/assets/styles/components/navigation.css
View File

@ -36,3 +36,29 @@
}
}
}
#sub-navigation {
@apply .w-full .bg-neutral-700 .shadow;
.items {
@apply .flex .items-center .text-sm .mx-2;
& > a, & > div {
@apply .inline-block .py-3 .px-4 .text-neutral-300 .no-underline;
transition: color 150ms linear, box-shadow 150ms ease-in;
&:not(:first-of-type) {
@apply .ml-2;
}
&.active, &:hover {
@apply .text-neutral-100;
box-shadow: inset 0 -2px config('colors.cyan-700');
}
&.active {
box-shadow: inset 0 -2px config('colors.cyan-500');
}
}
}
}

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>
);