106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
import styled from '@emotion/styled';
|
|
import { createPortal } from 'react-dom';
|
|
import { useLocation } from 'react-router-dom';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { useAuth } from '../../app/context/AuthProvider';
|
|
import { ROLES_NAME_ID } from '../../constants/constants';
|
|
import { AdminPanelSvg, DictSvg, ProjectSvg, SummarySvg, TasksSvg } from '../common/icons/icons';
|
|
|
|
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';
|
|
const svodPaths = '/svod';
|
|
const projectsPaths = '/projects';
|
|
|
|
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'} />
|
|
</div>
|
|
<span>Задачи</span>
|
|
</StyledNavLink>
|
|
<StyledNavLink to='/projects' className={location.pathname.startsWith(projectsPaths) ? 'active' : ''}>
|
|
<div className='img'>
|
|
<ProjectSvg fill={location.pathname.startsWith(projectsPaths) ? '#258141' : '#99A1AF'} />
|
|
</div>
|
|
<span>Проекты</span>
|
|
</StyledNavLink>
|
|
|
|
<StyledNavLink to='/svod' className={location.pathname.startsWith(svodPaths) ? 'active' : ''}>
|
|
<div className='img'>
|
|
<SummarySvg fill={location.pathname.startsWith(svodPaths) ? '#258141' : '#99A1AF'} />
|
|
</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);
|
|
}
|
|
} |