5d8af1f173
- Add CSS media queries for all sections: sidebar overlay, navbar, calendar, kanban, dashboard, list view, drawer, modal, reports, team tasks, members - Add hamburger menu button (hidden on desktop, visible on mobile) - Add sidebar slide-in overlay with backdrop for mobile - Auto-close sidebar on navigation for mobile UX - Login card, drawer, and modal go full-width on mobile - Dashboard stats grid collapses to 2-column on mobile - Report charts stack to single column on mobile
59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
import type { User } from './data';
|
|
import { Avatar } from './Shared';
|
|
import { RoleBadge } from './Shared';
|
|
|
|
const NAV_ITEMS = [
|
|
{ id: 'dashboard', icon: '⊞', label: 'Dashboard', roles: ['cto', 'manager', 'employee'] },
|
|
{ id: 'calendar', icon: '📅', label: 'Calendar', roles: ['cto', 'manager', 'employee'] },
|
|
{ id: 'kanban', icon: '▦', label: 'Kanban Board', roles: ['cto', 'manager', 'employee'] },
|
|
{ id: 'mytasks', icon: '✓', label: 'My Tasks', roles: ['employee'] },
|
|
{ id: 'teamtasks', icon: '👥', label: 'Team Tasks', roles: ['cto', 'manager'] },
|
|
{ id: 'reports', icon: '📊', label: 'Reports', roles: ['cto', 'manager'] },
|
|
{ id: 'members', icon: '👤', label: 'Members', roles: ['cto'] },
|
|
];
|
|
|
|
interface SidebarProps {
|
|
currentUser: User;
|
|
activePage: string;
|
|
onNavigate: (page: string) => void;
|
|
onSignOut: () => void;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function Sidebar({ currentUser, activePage, onNavigate, onSignOut, isOpen, onClose }: SidebarProps) {
|
|
const filteredNav = NAV_ITEMS.filter(n => n.roles.includes(currentUser.role));
|
|
return (
|
|
<>
|
|
{isOpen && <div className="sidebar-backdrop visible" onClick={onClose} />}
|
|
<div className={`sidebar ${isOpen ? 'sidebar-open' : ''}`}>
|
|
<div className="sidebar-logo">
|
|
<div className="sidebar-logo-icon">⚡</div>
|
|
<span className="sidebar-logo-text">Scrum-manager</span>
|
|
</div>
|
|
<div className="sidebar-divider" />
|
|
<div className="sidebar-section-label">Navigate</div>
|
|
<nav className="sidebar-nav">
|
|
{filteredNav.map(n => (
|
|
<div key={n.id} className={`sidebar-item ${activePage === n.id ? 'active' : ''}`} onClick={() => onNavigate(n.id)}>
|
|
<span className="sidebar-item-icon">{n.icon}</span>
|
|
{n.label}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
<div className="sidebar-profile">
|
|
<Avatar userId={currentUser.id} size={36} />
|
|
<div className="sidebar-profile-info">
|
|
<div className="sidebar-profile-name">{currentUser.name}</div>
|
|
<RoleBadge role={currentUser.role} />
|
|
</div>
|
|
</div>
|
|
<div style={{ padding: '0 16px 12px' }}>
|
|
<button className="sidebar-signout" onClick={onSignOut}>Sign Out</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|