114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
import { Badge } from 'modern-sk';
|
|
import { NavLink, useNavigate } from 'react-router';
|
|
import { ConnectionStatus } from '../common/ConnectionStatus';
|
|
import { useAppSelector, useAppDispatch } from '../../hooks/useAppDispatch';
|
|
import { usePermissions } from '../../hooks/usePermissions';
|
|
import { logout } from '../../store/slices/auth';
|
|
|
|
const NAV_ITEMS = [
|
|
{ to: '/', label: 'Home', icon: '⌂' },
|
|
{ to: '/library', label: 'Library', icon: '♫' },
|
|
{ to: '/search', label: 'Search & Download', icon: '⊕' },
|
|
{ to: '/downloads', label: 'Downloads', icon: '↓' },
|
|
{ to: '/storage', label: 'Storage', icon: '⊞' },
|
|
{ to: '/settings', label: 'Settings', icon: '⚙' },
|
|
] as const;
|
|
|
|
const ADMIN_ITEMS = [
|
|
{ to: '/admin', label: 'Admin', icon: '🔑' },
|
|
] as const;
|
|
|
|
export function Sidebar() {
|
|
const dispatch = useAppDispatch();
|
|
const navigate = useNavigate();
|
|
const { user, isAdmin } = usePermissions();
|
|
const collapsed = useAppSelector((s) => s.ui.sidebarCollapsed);
|
|
|
|
const handleLogout = () => {
|
|
dispatch(logout());
|
|
void navigate('/connect');
|
|
};
|
|
|
|
return (
|
|
<nav style={{ width: collapsed ? '3.5rem' : '14rem', flexShrink: 0, borderRight: '1px solid var(--color-border)', display: 'flex', flexDirection: 'column', padding: '0.75rem 0', background: 'var(--color-surface-1)', transition: 'width 0.2s', overflow: 'hidden' }}>
|
|
<div style={{ padding: collapsed ? '0 0.5rem' : '0 0.75rem', marginBottom: '1.5rem' }}>
|
|
<span style={{ fontWeight: 700, fontSize: '1.125rem', color: 'var(--color-accent)', whiteSpace: 'nowrap' }}>
|
|
{collapsed ? '♫' : '♫ MCMA'}
|
|
</span>
|
|
</div>
|
|
|
|
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '2px' }}>
|
|
{NAV_ITEMS.map(({ to, label, icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
end={to === '/'}
|
|
style={({ isActive }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.75rem',
|
|
padding: collapsed ? '0.625rem 0.75rem' : '0.625rem 1rem',
|
|
borderRadius: 6,
|
|
margin: '0 0.375rem',
|
|
color: isActive ? 'var(--color-accent)' : 'var(--color-text-2)',
|
|
background: isActive ? 'var(--color-surface-2)' : undefined,
|
|
fontWeight: isActive ? 600 : 400,
|
|
textDecoration: 'none',
|
|
fontSize: '0.875rem',
|
|
whiteSpace: 'nowrap',
|
|
transition: 'background 0.1s, color 0.1s',
|
|
})}
|
|
>
|
|
<span style={{ flexShrink: 0, fontSize: '1rem' }}>{icon}</span>
|
|
{!collapsed && label}
|
|
</NavLink>
|
|
))}
|
|
|
|
{isAdmin && (
|
|
<>
|
|
<div style={{ height: 1, background: 'var(--color-border)', margin: '0.5rem 0.75rem' }} />
|
|
{ADMIN_ITEMS.map(({ to, label, icon }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
style={({ isActive }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.75rem',
|
|
padding: collapsed ? '0.625rem 0.75rem' : '0.625rem 1rem',
|
|
borderRadius: 6,
|
|
margin: '0 0.375rem',
|
|
color: isActive ? 'var(--color-accent)' : 'var(--color-text-2)',
|
|
background: isActive ? 'var(--color-surface-2)' : undefined,
|
|
fontWeight: isActive ? 600 : 400,
|
|
textDecoration: 'none',
|
|
fontSize: '0.875rem',
|
|
whiteSpace: 'nowrap',
|
|
})}
|
|
>
|
|
<span style={{ flexShrink: 0 }}>{icon}</span>
|
|
{!collapsed && label}
|
|
</NavLink>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ padding: collapsed ? '0 0.5rem' : '0 0.75rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
{!collapsed && <ConnectionStatus />}
|
|
{!collapsed && user && (
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.5rem 0.25rem' }}>
|
|
<div>
|
|
<div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--color-text-1)' }}>{user.username}</div>
|
|
<Badge variant={user.role === 'admin' ? 'lime' : 'neutral'} style={{ marginTop: 2 }}>{user.role}</Badge>
|
|
</div>
|
|
<button onClick={handleLogout} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-text-3)', fontSize: '0.75rem', padding: '0.25rem' }}>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|