Rafael Lopes
2229a29af1
- Adicionado aba de comunicados e notas - Alterado aba lateral para exibir apenas as opções de atendimento - Removido arquivos de build do repositório
105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
import { useNavigate } from 'react-router-dom';
|
|
import { clearSession } from '../../auth/services/sessionService';
|
|
|
|
export function HomeSidebar({ items, activeItem, isMobile = false }) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<aside
|
|
style={{
|
|
background: 'linear-gradient(180deg, rgba(0, 49, 80, 0.98), rgba(7, 64, 98, 0.96))',
|
|
color: '#fff',
|
|
borderRadius: '28px',
|
|
padding: '1.5rem',
|
|
display: 'grid',
|
|
gap: '1.25rem',
|
|
alignContent: 'start',
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate('/new-attendance')}
|
|
style={{
|
|
border: 'none',
|
|
borderRadius: '20px',
|
|
padding: '1rem 1.15rem',
|
|
background: 'linear-gradient(135deg, var(--color-highlight), #f3b94d)',
|
|
color: '#132534',
|
|
fontWeight: 800,
|
|
textAlign: 'left',
|
|
}}
|
|
>
|
|
Abrir atendimento
|
|
</button>
|
|
|
|
<nav
|
|
style={{
|
|
display: 'grid',
|
|
gap: '0.5rem',
|
|
gridTemplateColumns: isMobile ? 'repeat(auto-fit, minmax(180px, 1fr))' : '1fr',
|
|
}}
|
|
>
|
|
{items.map((item) => {
|
|
const isActive = item.id === activeItem;
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => item.route && navigate(item.route)}
|
|
style={{
|
|
border: 'none',
|
|
borderRadius: '18px',
|
|
padding: '0.9rem 1rem',
|
|
background: isActive ? 'rgba(255, 255, 255, 0.14)' : 'transparent',
|
|
color: '#fff',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
fontWeight: isActive ? 700 : 500,
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<span>{item.label}</span>
|
|
{item.count ? (
|
|
<span
|
|
style={{
|
|
minWidth: 30,
|
|
borderRadius: 999,
|
|
padding: '0.2rem 0.5rem',
|
|
background: 'rgba(255, 255, 255, 0.12)',
|
|
fontSize: '0.82rem',
|
|
}}
|
|
>
|
|
{item.count}
|
|
</span>
|
|
) : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
clearSession();
|
|
navigate('/login');
|
|
}}
|
|
style={{
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
borderRadius: '18px',
|
|
padding: '0.9rem 1rem',
|
|
background: 'transparent',
|
|
color: '#ef4444',
|
|
fontWeight: 700,
|
|
marginTop: 'auto',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.2s',
|
|
}}
|
|
>
|
|
Sair
|
|
</button>
|
|
</aside>
|
|
);
|
|
}
|