feat: responsive layout with collapsible mobile sidebar (AP-017) - #496
feat: responsive layout with collapsible mobile sidebar (AP-017)#496navyamidha95339-arch wants to merge 2 commits into
Conversation
|
Nice responsive addition — the slide-in drawer with overlay, the aria-label on the hamburger, and minWidth:0 / overflowX:auto on the content for wide tables are all good calls. One thing before merge: the navbar switched to justify-content: space-between, but the hamburger is display:none on desktop — so with only the "Signed in as / Log out" group left in the header, it'll shift to the left on desktop (it was right-aligned before). Adding marginLeft: 'auto' to that right-side div keeps it on the right regardless of the hamburger being hidden. Also there's a stray empty {} at the top of the fragment in AdminSidebar.jsx worth removing. Could you also add a bit of evidence to the PR — a couple of screenshots (or a short screen recording) showing it at desktop width (sidebar static, logout on the right) and at mobile width (hamburger visible, drawer sliding in over the overlay, and closing on nav-link/overlay click)? Just so we can see the responsive behaviour end-to-end. Otherwise looks good — happy to approve once the desktop alignment is sorted, the evidence is attached, and CI's green. |
Summary
Implements AP-017 - makes the Admin Panel usable on small screens with a responsive layout and collapsible mobile sidebar.
Checklist
✅ Mobile sidebar - hidden by default below 768px, opens via a hamburger menu in the navbar as a slide-in drawer with a dark overlay
✅ Tables adapt - main content area scrolls horizontally so wide tables don't break the page layout
✅ Breakpoint at 768px
✅ No layout breakage below 768px
Testing
Manually tested via Chrome DevTools responsive mode at 375px and ~513px widths:
Sidebar correctly hidden on mobile, opens/closes via hamburger and overlay click, closes on nav selection
Verified table-scroll behavior on the existing Shifts page (real data) - table scrolls horizontally within its container without breaking the sidebar/navbar layout
No console errors or visual breakage observed at tested widths