120 lines
2.9 KiB
JavaScript
120 lines
2.9 KiB
JavaScript
import { createPortal } from 'react-dom';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { NavLink } from 'react-router-dom';
|
|
import styled from '@emotion/styled';
|
|
import { TasksSvg, AdminPanelSvg, DictSvg } from '../common/icons/icons';
|
|
import { useAuth } from '../../app/context/AuthProvider';
|
|
import { ROLES_NAME_ID } from '../../constants/constants';
|
|
|
|
const Switch = styled.div`
|
|
margin-left: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
height: 2rem;
|
|
`;
|
|
|
|
const Buttons = styled.div`
|
|
width: max-content;
|
|
height: 1rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
`;
|
|
|
|
const StyledNavLink = styled(NavLink)`
|
|
display: flex;
|
|
gap: 0.625rem;
|
|
align-items: center;
|
|
border-radius: 0.5rem;
|
|
padding: 0rem 0.75rem;
|
|
cursor: pointer;
|
|
height: 2rem;
|
|
|
|
.img {
|
|
svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background-color: #f9fafb;
|
|
span {
|
|
color: #258141;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export function HeaderSwitch() {
|
|
const { user } = useAuth();
|
|
const location = useLocation();
|
|
const formsTasksPaths = ['/tasks', '/forms'];
|
|
const adminPathsPrefix = '/admin_panel';
|
|
const dictPaths = '/dicts-navigator';
|
|
|
|
if (!user) return;
|
|
|
|
const portalContent = (
|
|
<Switch>
|
|
<Buttons>
|
|
<StyledNavLink
|
|
to="/tasks"
|
|
className={
|
|
formsTasksPaths.includes(location.pathname) ? 'active' : ''
|
|
}
|
|
>
|
|
<div className="img">
|
|
<TasksSvg
|
|
fill={
|
|
formsTasksPaths.includes(location.pathname)
|
|
? '#258141'
|
|
: '#99A1AF'
|
|
}
|
|
></TasksSvg>
|
|
</div>
|
|
<span>Задачи</span>
|
|
</StyledNavLink>
|
|
{user.role_id === ROLES_NAME_ID.admin && (
|
|
<StyledNavLink
|
|
to="/admin_panel/users"
|
|
className={
|
|
location.pathname.startsWith(adminPathsPrefix) ? 'active' : ''
|
|
}
|
|
>
|
|
<div className="img">
|
|
<AdminPanelSvg
|
|
fill={
|
|
location.pathname.startsWith(adminPathsPrefix)
|
|
? '#258141'
|
|
: '#99A1AF'
|
|
}
|
|
/>
|
|
</div>
|
|
<span>Администрирование</span>
|
|
</StyledNavLink>
|
|
)}
|
|
<StyledNavLink
|
|
to="/dicts-navigator"
|
|
className={location.pathname.startsWith(dictPaths) ? 'active' : ''}
|
|
>
|
|
<div className="img">
|
|
<DictSvg
|
|
fill={
|
|
location.pathname.startsWith(dictPaths) ? '#258141' : '#99A1AF'
|
|
}
|
|
/>
|
|
</div>
|
|
<span>Справочники</span>
|
|
</StyledNavLink>
|
|
</Buttons>
|
|
</Switch>
|
|
);
|
|
const targetElement = document.getElementById('TableInfo');
|
|
if (targetElement) {
|
|
return createPortal(portalContent, targetElement);
|
|
}
|
|
}
|