Update Layout components for MUI v7 and responsive behavior

[SAUMILDHANKAR]

This issue written with ChatGPT models' help

Overview

We want to review and update the shared Layout/ components for MUI v7 compatibility and responsive behavior consistency.

Details

⚠️ Important workflow note:
This work should be completed on a dedicated feature branch and should not be merged directly into develop or main until validation is complete.

The Layout/ folder appears to have already been converted to TypeScript, and some files may require minimal or no code changes for MUI v7. However, because these components are shared throughout the application, they should still be reviewed and validated as part of the migration effort.

This issue should focus on identifying any MUI components, styling patterns, responsive behaviors, or deprecated APIs that may require updates for MUI v7 compatibility.

Potential migration and validation work may include:

• Reviewing Drawer, List, ListItem, Avatar, Divider, and navigation-related MUI components
• Reviewing Box, Container, Grid, Stack, and layout wrappers if present
• Verifying all sx usage remains compatible with MUI v7 styling patterns
• Reviewing responsive breakpoints and mobile navigation behavior
• Verifying drawer open/close interactions continue to function correctly
• Reviewing accessibility behavior for keyboard navigation and focus management
• Reviewing theme-based color usage and palette references
• Reviewing custom wrapper components that internally use MUI components
• Ensuring TypeScript typings remain compatible with current MUI component APIs
• Performing manual QA to identify spacing, alignment, overflow, or responsive regressions
• Optional refactoring is allowed if it improves maintainability or MUI v7 compatibility

The Menu.tsx component appears to be the most MUI-heavy file in this folder and deserves particular attention because it uses:

• Drawer
• List
• ListItem
• ListItemAvatar
• ListItemText
• Avatar
• Divider
• Custom IconButton
• Extensive conditional rendering based on user permissions

Possible areas to review include:

• Drawer API compatibility and PaperProps behavior
• Theme-aware styling inside sx
• Responsive drawer sizing and mobile behavior
• List item rendering and navigation interactions
• Keyboard accessibility and focus trapping within the drawer
• Hover and interaction styling consistency under MUI v7

Known files and folders in scope include:

• client/src/components/Layout/Copyright.tsx
• client/src/components/Layout/Footer.tsx
• client/src/components/Layout/Header.tsx
• client/src/components/Layout/HeaderHome.tsx
• client/src/components/Layout/Menu.tsx
• client/src/components/Layout/MenuItemLink.tsx
• client/src/components/Layout/WidgetFooter.tsx

Action Items

[PLEASE ADD ACTION ITEMS (Dev lead/developer will add)]

Resources

• Parent issue: MUI upgrade parent issue (#2626)
• Layout folder: https://github.com/hackforla/food-oasis/tree/develop/client/src/components/Layout
• MUI migration documentation: https://mui.com/material-ui/migration/
• MUI Drawer documentation: https://mui.com/material-ui/react-drawer/
• MUI List documentation: https://mui.com/material-ui/react-list/
• MUI sx prop documentation: https://mui.com/system/getting-started/the-sx-prop/