misc_pterodactyl-panel/resources/scripts/components/NavigationBar.tsx

52 lines
2.2 KiB
TypeScript
Raw Normal View History

2019-06-26 04:28:56 +00:00
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';
2019-11-16 21:08:38 +00:00
import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
import { useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
import SearchContainer from '@/components/dashboard/search/SearchContainer';
2019-06-26 04:28:56 +00:00
2019-11-16 21:08:38 +00:00
export default () => {
const user = useStoreState((state: ApplicationStore) => state.user.data!);
2019-12-16 02:07:16 +00:00
const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
2019-11-16 21:08:38 +00:00
return (
<div id={'navigation'}>
<div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
<div id={'logo'}>
<Link to={'/'}>
2019-12-16 02:07:16 +00:00
{name}
2019-11-16 21:08:38 +00:00
</Link>
</div>
<div className={'right-navigation'}>
<SearchContainer/>
2019-11-16 21:08:38 +00:00
<NavLink to={'/'} exact={true}>
<FontAwesomeIcon icon={faLayerGroup}/>
</NavLink>
<NavLink to={'/account'}>
<FontAwesomeIcon icon={faUserCircle}/>
</NavLink>
{user.rootAdmin &&
<a href={'/admin'} target={'_blank'}>
<FontAwesomeIcon icon={faCogs}/>
</a>
}
{process.env.NODE_ENV !== 'production' &&
<NavLink to={'/design'}>
<FontAwesomeIcon icon={faSwatchbook}/>
</NavLink>
}
2019-12-16 02:07:45 +00:00
<a href={'/auth/logout'}>
2019-11-16 21:08:38 +00:00
<FontAwesomeIcon icon={faSignOutAlt}/>
2019-12-16 02:07:45 +00:00
</a>
2019-11-16 21:08:38 +00:00
</div>
2019-06-26 04:28:56 +00:00
</div>
</div>
2019-11-16 21:08:38 +00:00
);
};