501/navbar hamburger menu and notification bell improvements

[richestrinh]

This PR:

Resolves #501

1. Updated positioning for hamburger menu and bell drop-down to appear below nav bar.
2. Updated backdrop for hamburger menu and bell.
3. Fixed hamburger menu icons to have consistent sizing.
4. Updated spacing around divider seperating routes and settings.

Screenshots (if applicable):

[leekahung]

Hey @richestrinh thanks for contributing to changes for PASS! The changes for this PR looks great, just a few details I want this PR to go over. (see feedback)

One other thing that could be addressed here or another PR is the extra padding from the MUI menu and MUI menu list (see clip). If we could get the padding away, think it'll be good.

Screen.Recording.2023-11-28.at.17.23.45.mov

[xscottxbrownx]

After Ka Hung's questions/concerns are addressed, I would approve as well. Don't see anything else not already mentioned.

[leekahung]

I think removing the one layer of padding should be sufficient. Removing both layers of padding makes the menu seem too crowded/squished? The spacing between sections (like that of Profile and Settings) looks just right.

Of course, there's a divider, but think that distance from the bottom of profile to the divider or from the top of settings to the divider looks pretty good. The problem before was that the padding was doubled up when only one layer of padding is needed.

[leekahung]

I think other than what I've just noticed, think every else looks alright. Think it'll be good to go after the issue with the padding gets resolved (see new comment).

[leekahung]

Oh, this is nice! We could of course go back in later and fix the padding of the notification menu once we got a working design (and not a placeholder), but I think the NavMenu is looking pretty great now.

Can certainly approve this for merging. Good work!

[xscottxbrownx]

I approved, and then realized there is a difference on full mobile menu (when contacts and civic profile are also in the menu.)

The padding isn't consistent on that one compared to the others that were changed.

I think it's still the double padding version.

[richestrinh]

I approved, and then realized there is a difference on full mobile menu (when contacts and civic profile are also in the menu.)

The padding isn't consistent on that one compared to the others that were changed.

I think it's still the double padding version.

I think it had to do with the min-height for the mobile view.
Here's what it looks like after my fix!