83 lines
2.3 KiB
React
83 lines
2.3 KiB
React
|
import { useNavigate } from 'react-router-dom';
|
||
|
|
|
||
|
|
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',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
+ Novo 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>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|