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

88 lines
2.9 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 { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons';
2019-11-16 21:08:38 +00:00
import { useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import SearchContainer from '@/components/dashboard/search/SearchContainer';
import tw, { styled, theme } from 'twin.macro';
import http from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
const Navigation = styled.div`
${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
& > div {
${tw`mx-auto w-full flex items-center`};
}
& #logo {
${tw`flex-1`};
& > a {
${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`};
}
}
`;
const RightNavigation = styled.div`
${tw`flex h-full items-center justify-center`};
& > a, & > button, & > .navigation-link {
${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
&:active, &:hover {
${tw`text-neutral-100 bg-black`};
}
&:active, &:hover, &.active {
box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
}
}
`;
2019-06-26 04:28:56 +00:00
2019-11-16 21:08:38 +00:00
export default () => {
2019-12-16 02:07:16 +00:00
const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
2020-08-26 04:39:00 +00:00
const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin);
2021-10-23 20:22:18 +00:00
const [ isLoggingOut, setIsLoggingOut ] = React.useState(false);
const onTriggerLogout = () => {
setIsLoggingOut(true);
http.post('/auth/logout').finally(() => {
// @ts-ignore
window.location = '/';
});
};
2019-11-16 21:08:38 +00:00
return (
<Navigation>
<SpinnerOverlay visible={isLoggingOut} />
<div css={tw`mx-auto w-full flex items-center`} style={{ maxWidth: '1200px', height: '3.5rem' }}>
2019-11-16 21:08:38 +00:00
<div id={'logo'}>
<Link to={'/'}>
2019-12-16 02:07:16 +00:00
{name}
2019-11-16 21:08:38 +00:00
</Link>
</div>
<RightNavigation>
<SearchContainer/>
<NavLink to={'/'} exact>
2019-11-16 21:08:38 +00:00
<FontAwesomeIcon icon={faLayerGroup}/>
</NavLink>
<NavLink to={'/account'}>
<FontAwesomeIcon icon={faUserCircle}/>
</NavLink>
2020-08-26 04:39:00 +00:00
{rootAdmin &&
2021-10-23 20:22:18 +00:00
<NavLink to={'/admin'}>
2019-11-16 21:08:38 +00:00
<FontAwesomeIcon icon={faCogs}/>
2021-10-23 20:22:18 +00:00
</NavLink>
2019-11-16 21:08:38 +00:00
}
<button onClick={onTriggerLogout}>
2019-11-16 21:08:38 +00:00
<FontAwesomeIcon icon={faSignOutAlt}/>
</button>
</RightNavigation>
2019-06-26 04:28:56 +00:00
</div>
</Navigation>
2019-11-16 21:08:38 +00:00
);
};