denis/peliprint
denis/peliprint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update resources/scripts/components/NavigationBar.tsx

Browse source
This commit is contained in:
denis 2024-11-03 02:26:44 -05:00
parent 34a793a4bc
commit 1c420bd7be
1 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
resources/scripts/components/NavigationBar.tsx
View file

@ -4,6 +4,7 @@ import { Link, NavLink } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCogs, faLayerGroup, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; import { faCogs, faLayerGroup, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
import { useStoreState } from 'easy-peasy'; import { useStoreState } from 'easy-peasy';
import { useTranslation } from 'react-i18next';
import { ApplicationStore } from '@/state'; import { ApplicationStore } from '@/state';
import SearchContainer from '@/components/dashboard/search/SearchContainer'; import SearchContainer from '@/components/dashboard/search/SearchContainer';
import tw, { theme } from 'twin.macro'; import tw, { theme } from 'twin.macro';
@ -13,10 +14,6 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import Tooltip from '@/components/elements/tooltip/Tooltip'; import Tooltip from '@/components/elements/tooltip/Tooltip';
import Avatar from '@/components/Avatar'; 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` const RightNavigation = styled.div`
& > a, & > a,
& > button, & > button,
@ -37,8 +34,10 @@ const RightNavigation = styled.div`
`; `;
export default () => { export default () => {
const { t } = useTranslation('strings');
const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin); const isAdmin = useStoreState((state: ApplicationStore) => state.user.data!.admin);
const [isLoggingOut, setIsLoggingOut] = useState(false); const [isLoggingOut, setIsLoggingOut] = useState(false);
const onTriggerLogout = () => { const onTriggerLogout = () => {
@ -50,7 +49,7 @@ export default () => {
}; };
return ( return (
<div className={'w-full bg-neutral-900 shadow-md overflow-x-auto'} id={'NavigationBar'}> <div className={'w-full bg-neutral-900 shadow-md overflow-x-auto'}>
<BeforeNavigation /> <BeforeNavigation />
<SpinnerOverlay visible={isLoggingOut} /> <SpinnerOverlay visible={isLoggingOut} />
<div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}> <div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}>
@ -66,28 +65,28 @@ export default () => {
</div> </div>
<RightNavigation className={'flex h-full items-center justify-center'}> <RightNavigation className={'flex h-full items-center justify-center'}>
<SearchContainer /> <SearchContainer />
<Tooltip placement={'bottom'} content={'Dashboard'}> <Tooltip placement={'bottom'} content={t<string>('dashboard')}>
<NavLink to={'/'} exact id={'NavigationDashboard'}> <NavLink to={'/'} exact>
<FontAwesomeIcon icon={faLayerGroup} /> <FontAwesomeIcon icon={faLayerGroup} />
</NavLink> </NavLink>
</Tooltip> </Tooltip>
{rootAdmin && ( {isAdmin && (
<Tooltip placement={'bottom'} content={'Admin'}> <Tooltip placement={'bottom'} content={t<string>('admin')}>
<a href={'/admin'} rel={'noreferrer'} id={'NavigationAdmin'}> <a href={'/admin'} rel={'noreferrer'}>
<FontAwesomeIcon icon={faCogs} /> <FontAwesomeIcon icon={faCogs} />
</a> </a>
</Tooltip> </Tooltip>
)} )}
<AdditionalItems /> <AdditionalItems />
<Tooltip placement={'bottom'} content={'Account Settings'}> <Tooltip placement={'bottom'} content={t<string>('account_settings')}>
<NavLink to={'/account'} id={'NavigationAccount'}> <NavLink to={'/account'}>
<span className={'flex items-center w-5 h-5'}> <span className={'flex items-center w-5 h-5'}>
<Avatar.User /> <Avatar.User />
</span> </span>
</NavLink> </NavLink>
</Tooltip> </Tooltip>
<Tooltip placement={'bottom'} content={'Sign Out'}> <Tooltip placement={'bottom'} content={t<string>('sign_out')}>
<button onClick={onTriggerLogout} id={'NavigationLogout'}> <button onClick={onTriggerLogout}>
<FontAwesomeIcon icon={faSignOutAlt} /> <FontAwesomeIcon icon={faSignOutAlt} />
</button> </button>
</Tooltip> </Tooltip>
@ -96,4 +95,4 @@ export default () => {
<AfterNavigation /> <AfterNavigation />
</div> </div>
); );
}; };