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

Add basic navigation bar

Browse source
This commit is contained in:
Dane Everitt 2019-06-25 21:28:56 -07:00
parent c7355975ad
commit 9cb8020dbe
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 121 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,11 +2,11 @@ import * as React from 'react';
import { hot } from 'react-hot-loader/root';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import AuthenticationRouter from '@/routers/AuthenticationRouter';
import AccountRouter from '@/routers/AccountRouter';
import ServerOverviewContainer from '@/components/ServerOverviewContainer';
import { StoreProvider } from 'easy-peasy';
import { store } from '@/state';
import TransitionRouter from '@/TransitionRouter';
import DashboardRouter from '@/routers/DashboardRouter';
interface WindowWithUser extends Window {
PterodactylUser?: {
@ -41,9 +41,8 @@ const App = () => {
<Router basename={'/'}>
<div className={'mx-auto w-auto'}>
<TransitionRouter basename={'/'}>
<Route exact path="/" component={ServerOverviewContainer}/>
<Route path="/" component={DashboardRouter}/>
<Route path="/auth" component={AuthenticationRouter}/>
<Route path="/account" component={AccountRouter}/>
</TransitionRouter>
</div>
</Router>

35
resources/scripts/components/NavigationBar.tsx Normal file
View file

@ -0,0 +1,35 @@
import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons/faLayerGroup';
import { faUserCircle } from '@fortawesome/free-solid-svg-icons/faUserCircle';
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
export default () => (
<div id={'navigation'}>
<div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
<div id={'logo'}>
<Link to={'/'}>
Pterodactyl
</Link>
</div>
<div className={'right-navigation'}>
<NavLink to={'/'} exact={true}>
<FontAwesomeIcon icon={faLayerGroup}/>
</NavLink>
<NavLink to={'/account'}>
<FontAwesomeIcon icon={faUserCircle}/>
</NavLink>
{process.env.NODE_ENV !== 'production' &&
<NavLink to={'/design'}>
<FontAwesomeIcon icon={faSwatchbook}/>
</NavLink>
}
<NavLink to={'/auth/logout'}>
<FontAwesomeIcon icon={faSignOutAlt}/>
</NavLink>
</div>
</div>
</div>
);

4
resources/scripts/components/account/AccountOverviewContainer.tsx → resources/scripts/components/dashboard/AccountOverviewContainer.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react';
import ContentBox from '@/components/elements/ContentBox';
import UpdatePasswordForm from '@/components/account/forms/UpdatePasswordForm';
import UpdateEmailAddressForm from '@/components/account/forms/UpdateEmailAddressForm';
import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
export default () => {
return (

7
resources/scripts/components/dashboard/DashboardContainer.tsx Normal file
View file

@ -0,0 +1,7 @@
import React from 'react';
export default () => (
<div>
<p>Dashboard</p>
</div>
);

0
resources/scripts/components/account/DesignElementsContainer.tsx → resources/scripts/components/dashboard/DesignElementsContainer.tsx
View file

0
resources/scripts/components/account/forms/UpdateEmailAddressForm.tsx → resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
View file

0
resources/scripts/components/account/forms/UpdatePasswordForm.tsx → resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
View file

49
resources/scripts/routers/AccountRouter.tsx
View file

@ -1,49 +0,0 @@
import * as React from 'react';
import { Link, NavLink, Route, RouteComponentProps } from 'react-router-dom';
import DesignElementsContainer from '@/components/account/DesignElementsContainer';
import AccountOverviewContainer from '@/components/account/AccountOverviewContainer';
export default ({ match }: RouteComponentProps) => (
<div>
<div className={'w-full bg-neutral-900 shadow-md'}>
<div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
<div className={'flex-1'}>
<Link
to={'/'}
className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100'}
style={{
transition: 'color 150ms linear',
}}
>
Pterodactyl
</Link>
</div>
<div className={'flex h-full items-center justify-center'}>
<NavLink
to={'/'}
exact={true}
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
style={{
transition: 'background-color 150ms linear, color 150ms linear',
}}
>
Dashboard
</NavLink>
<NavLink
to={'/account'}
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
style={{
transition: 'background-color 150ms linear, color 150ms linear',
}}
>
Account
</NavLink>
</div>
</div>
</div>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
<Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
<Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
</div>
</div>
);

17
resources/scripts/routers/DashboardRouter.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from 'react';
import { Route, RouteComponentProps } from 'react-router-dom';
import DesignElementsContainer from '@/components/dashboard/DesignElementsContainer';
import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
import NavigationBar from '@/components/NavigationBar';
import DashboardContainer from '@/components/dashboard/DashboardContainer';
export default ({ match }: RouteComponentProps) => (
<div>
<NavigationBar/>
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
<Route path={'/'} component={DashboardContainer} exact/>
<Route path={'/account'} component={AccountOverviewContainer}/>
<Route path={'/design'} component={DesignElementsContainer}/>
</div>
</div>
);