Skip to content

feat: responsive layout with collapsible mobile sidebar (AP-017) - #496

Open
navyamidha95339-arch wants to merge 2 commits into
mainfrom
navya/feature/responsive-layout
Open

feat: responsive layout with collapsible mobile sidebar (AP-017)#496
navyamidha95339-arch wants to merge 2 commits into
mainfrom
navya/feature/responsive-layout

Conversation

@navyamidha95339-arch

Copy link
Copy Markdown
Collaborator

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

@Krisha190235

Copy link
Copy Markdown
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants