Icon Menu Positioned on App Bar for Mobile/Small-Screen View

[Amy-Pr]

Description

This PR implements an interactive icon on the App Bar containing the Nav Links for small screen sizes. Uses styling from "App Bar with Responsive Menu" MUI component. https://mui.com/material-ui/react-app-bar/

Question to team: Should the App Bar be its own component, as the code takes up a good 90% of the Layout.jsx?

Related Issue

Closes #39

Acceptance Criteria

• Title appears on Left side in medium/large screen views, Nav links appear on right side
• Nav links replaced with Menu Icon on small screens.
• Clicking on icon closes and opens menu
• Clicking on Menu Item links closes menu
• Links inside the Menu should behave like the Nav Links do.
• Links and menu disappear on Home view when there is no list token yet (for all screen sizes).

Type of Changes

	Type
	🐛 Bug fix
✓	✨ New feature
	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

New menu icon and toast icon. Refactored ternary operator for the hiding the links when there is no list token. Used MUI Components instead of empty div elements, since the div elements interfered with responsive behavior.

Testing Steps / QA Criteria

• Oberve responsive behavior is acting as intended by viewing on many screen sizes
• Click on links in both screen sizes to make sure they route to the correct page, and do not refresh browser
• Cllick on menu icon to open and close

[github-actions]

Visit the preview URL for this PR (updated for commit ee837d0):

https://tcl-57-smart-shopping-list--pr56-ap-feature-navbar-me-efspx0f9.web.app

_{(expires Sun, 04 Jun 2023 03:10:29 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb}

[emilysellers]

I think the toast icon adds some fun character but could also be a bit misleading to the user as it kind of resembles a button or some kind of interactive element. I think the nav bar might be stronger without it. Just my two cents!

[emilysellers]

Nice work, @Amy-Pr! This is working as expected and provides a much cleaner nav bar on smaller screens. In answer to your question, I think the App Bar could be refactored into its own component, but it's also fine as is.