[UI/UX Design] Design a global responsive app shell with header navigation

[thlpkee20-wq]

Description

This is a UI/UX design task to design a global app shell (header, primary navigation, content region) that wraps authenticated screens. Currently App.tsx renders pages with no shared navigation chrome, leaving users without consistent wayfinding across discovery, dashboards, and management screens.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/App.tsx, src/index.css
• The shell must host the notifications bell and adapt to a mobile menu pattern

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/app-shell
• Implement changes
  • Design the header with logo, primary nav, and account/notifications area
  • Design the responsive collapse to a mobile menu (hamburger/drawer)
  • Define the content max-width and consistent page gutters
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • mobile drawer open/close, keyboard nav, active-route indication, focus order, contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: global responsive app shell

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours