Add Navbar and skeleton pages

[joelmackenz]

What this PR does (required):

• Adds a navbar component and skeleton pages for MyJobs, Notifications, Messages, and Profile. The Navbar includes links to all of these, and dynamically renders information for the top links, which displays upon hover. Dummy info is provided at the top in order to populate the fields. The links will navigate to their respective pages. The Profile photo is clickable, and opens a popover for the profile page and logout page (logout was not implemented, though: it simply leads to an empty function).

Screenshots / Videos (required):

Any information needed to test this feature (required):

• A Navbar component must be imported into App.js, as well as paths to the new pages. I plan on including these once I have access to the protected routes, to keep the navbar separate from the unprotected routes.

Any issues with the current functionality (optional):

-I provided a null key to all items being mapped on line 131 of Navbar.tsx. I tried to make the key equal the name of the mapped item ("alert", in this case), but this causes TypeScript to throw "No overload matches this call." I'm not sure how to give the items unique keys in this circumstance.

[g4rry420]

The styling looks good Joel.

Just a couple of suggestions according to me:

• Currently, when I hover the Notifications tab or if I clicked the Profile avatar there is padding-right coming up to the header of navbar. Unfortunately, this is currently bug in material-ui. I believe this can solved using Popper instead of Popover.
• useStyles hook should be in separate file to make it consistent with rest of the project structure.
• Notifications tab shouldn't be wrapped inside Link tag as user is not going to send over to different page.
• The navbar isn't responsive. I recommend to check out this article. But, instead of using custom useState for mobile screen detection you can use useMediaquery provided by material-ui out of the box.

Let me know if you need any help :)

[bonnieli]

nice clean code!

[joelmackenz]

@g4rry420 Thanks for the thorough review, Gurkiran.
I also noticed the padding-right issue with the popover, although it only seemed to happen on the pre-loaded dashboard page. I refactored them all to poppers, and these do work much better. Padding-right issue is removed.
I made the navbar responsive. It's pretty simple right now, but it works, and it'll let us move forward. It can be expanded in the future if we have enough time.
Finally, I was picturing there being a notifications page, similar to the one on Facebook. We should all chat about this during the next meeting. I kept the Notifications page and link in, for the time being.

[joelmackenz]

As I was refactoring anyway, I updated the profile menu to work as a toggle. @bonnieli, does the approval still stand? It's a small change, but I just want to be sure :)

[bonnieli]

As I was refactoring anyway, I updated the profile menu to work as a toggle. @bonnieli, does the approval still stand? It's a small change, but I just want to be sure :)

yep approval still stands!

[joelmackenz]

Thank you!

…

On Jun 5, 2021, at 5:57 PM, Bonnie Li ***@***.***> wrote:  As I was refactoring anyway, I updated the profile menu to work as a toggle. @bonnieli, does the approval still stand? It's a small change, but I just want to be sure :) yep approval still stands! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.