103 lines
No EOL
4.2 KiB
TypeScript
103 lines
No EOL
4.2 KiB
TypeScript
import * as React from 'react';
|
|
import { useState } from 'react';
|
|
import { Link, NavLink } from 'react-router-dom';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faCogs, faLayerGroup, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
|
|
import { useStoreState } from 'easy-peasy';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ApplicationStore } from '@/state';
|
|
import SearchContainer from '@/components/dashboard/search/SearchContainer';
|
|
import tw, { theme } from 'twin.macro';
|
|
import styled from 'styled-components/macro';
|
|
import http from '@/api/http';
|
|
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
|
import Tooltip from '@/components/elements/tooltip/Tooltip';
|
|
import Avatar from '@/components/Avatar';
|
|
|
|
import BeforeNavigation from '@/blueprint/components/Navigation/NavigationBar/BeforeNavigation';
|
|
import AdditionalItems from '@/blueprint/components/Navigation/NavigationBar/AdditionalItems';
|
|
import AfterNavigation from '@/blueprint/components/Navigation/NavigationBar/AfterNavigation';
|
|
|
|
|
|
const RightNavigation = styled.div`
|
|
& > 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.600`.toString()};
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default () => {
|
|
const { t } = useTranslation('strings');
|
|
|
|
const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
|
|
const isAdmin = useStoreState((state: ApplicationStore) => state.user.data!.admin);
|
|
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
|
|
|
const onTriggerLogout = () => {
|
|
setIsLoggingOut(true);
|
|
http.post('/auth/logout').finally(() => {
|
|
// @ts-expect-error this is valid
|
|
window.location = '/';
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={'w-full bg-neutral-900 shadow-md overflow-x-auto'}>
|
|
<BeforeNavigation />
|
|
<SpinnerOverlay visible={isLoggingOut} />
|
|
<div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}>
|
|
<div id={'logo'} className={'flex-1'}>
|
|
<Link
|
|
to={'/'}
|
|
className={
|
|
'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150'
|
|
}
|
|
>
|
|
{name}
|
|
</Link>
|
|
</div>
|
|
<RightNavigation className={'flex h-full items-center justify-center'}>
|
|
<SearchContainer />
|
|
<Tooltip placement={'bottom'} content={t<string>('dashboard')}>
|
|
<NavLink to={'/'} exact>
|
|
<FontAwesomeIcon icon={faLayerGroup} />
|
|
</NavLink>
|
|
</Tooltip>
|
|
{isAdmin && (
|
|
<Tooltip placement={'bottom'} content={t<string>('admin')}>
|
|
<a href={'/admin'} rel={'noreferrer'}>
|
|
<FontAwesomeIcon icon={faCogs} />
|
|
</a>
|
|
</Tooltip>
|
|
)}
|
|
<AdditionalItems />
|
|
<Tooltip placement={'bottom'} content={t<string>('account_settings')}>
|
|
<NavLink to={'/account'}>
|
|
<span className={'flex items-center w-5 h-5'}>
|
|
<Avatar.User />
|
|
</span>
|
|
</NavLink>
|
|
</Tooltip>
|
|
<Tooltip placement={'bottom'} content={t<string>('sign_out')}>
|
|
<button onClick={onTriggerLogout}>
|
|
<FontAwesomeIcon icon={faSignOutAlt} />
|
|
</button>
|
|
</Tooltip>
|
|
</RightNavigation>
|
|
</div>
|
|
<AfterNavigation />
|
|
</div>
|
|
);
|
|
}; |