Admin Page Content

[riddhisahni]

Redesign Admin Console Page + Make Nav Bar Collapsible

Branch: 05/admin-console
File to Edit: src/app/admin/page.tsx

Goal

Great work with the initial admin console. We now want to update the Admin Console page so it matches the updated design. The current page is centered and a bit small. We want to follow the full-width layout and styling shown in the new mockup. We also want to allow the navbar to collapse/expand based on window size as well as based on the arrow being clicked.

Admin Console Page Requirements

• Update page header (title + subtitle) to match new design and align with the main content area.
• Move the search bar to the left under the header, with the “Export” link on the right.
• Add a white, rounded container that holds the partner list.
• Style partner rows using the green alternating background and right-arrow icon.
• Ensure rows are full-width, clickable, and follow the mockup spacing.
• Match the spacing, padding, and alignment used in the Overview page.
• Make the page fully responsive.

Collapsible Navigation Bar Requirements

• Add collapse state (collapsed, setCollapsed) inside src/app/layout.tsx so it persists across all routes.
• Pass the collapse state and toggle function into <SideNavbar /> as props.
• In SideNavbar.tsx, render the collapse/expand arrow and update sidebar width and text visibility based on the collapsed prop.
• Add Tailwind transition to slide Sidebar in/out smoothly
• When collapsed:
  • Show icons only (smaller sidebar width)
• When expanded:
  • Show icons + labels (normal sidebar width)

Figma Designs

https://www.figma.com/design/o1AJFgIsg1TZs4V15iH1BW/Food-For-Free?node-id=367-9111&t=nGKaLGW3Ykj8dbiJ-0

Acceptance Criteria

• Page visually matches the updated mockup.
• Rows use correct colors, spacing, and icon placement.
• Search row is aligned correctly.
• Layout adjusts properly on tablet and mobile.
• No console errors.

Deliverables

• Updated admin/page.tsx
• PR reviewed by @benmli and @riddhisahni