subodh/scrum-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mobile responsive support (768px breakpoint)

Browse Source 
- 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
This commit is contained in:
tusuii
2026-02-15 13:10:39 +05:30
parent e46d8773ee
commit 5d8af1f173
4 changed files with 2291 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/Sidebar.tsx
View File

@@ -17,36 +17,42 @@ interface SidebarProps {
activePage: string;
onNavigate: (page: string) => void;
onSignOut: () => void;
isOpen: boolean;
onClose: () => void;
}
export function Sidebar({ currentUser, activePage, onNavigate, onSignOut }: SidebarProps) {
export function Sidebar({ currentUser, activePage, onNavigate, onSignOut, isOpen, onClose }: SidebarProps) {
const filteredNav = NAV_ITEMS.filter(n => n.roles.includes(currentUser.role));
return (
<div className="sidebar">
<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}
<>
{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>
))}
</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 style={{ padding: '0 16px 12px' }}>
<button className="sidebar-signout" onClick={onSignOut}>Sign Out</button>
</div>
</div>
<div style={{ padding: '0 16px 12px' }}>
<button className="sidebar-signout" onClick={onSignOut}>Sign Out</button>
</div>
</div>
</>
);
}