01 navbar

[TrissyG]

Context

Implements a navbar to be rendered on all pages of the website.

Closes #4

What Changed?

We did the following...

• Added a navbar component
• Added styling to the navbar items (there is a highlight that will show which page you are on, except for on the home page)
• Implemented responsivity (switches to a hamburger menu when the screen size is less than 768px wide)

How To Review

• Click through some menus and check that the highlight works correctly.
• Resize screen gradually to check responsiveness is suitable.

Testing

UI Testable when testing framework implemented.

Notes

[raymondyangdev]

Looks good! 🔥

Few questions from me:

1. Is there a reason why we're not highlighting that we're on the home page/root on the desktop menu?
   web/src/components/navigation/Header.tsx Line 88: && item.route !== "/"
2. Are we planning on integrating Strapi for our NavItems?
   I think we discussed this in our stand up(?) - happy to work on this if we are.

[TrissyG]

RE: @raymondyangdev

1. I was in favour of not having 'Home' highlighted as I think it looks a bit strange to have a non-user-navigated 'selection' being shown. I also think that given our mostly techie/young target audience we could omit it entirely and just have the logo be the home link. Nielsen research tells me I'm wrong, so i will make a commit rn to add the home highlight lol

2.) Yes, I have not done that, if its an easy fix then it would be great if you could implement that on a single commit and i can steal the process for the footer branch :33

[raymondyangdev]

@TrissyG

Integrated Strapi to our Navbar 🚀

In Strapi dashboard, I've added the following:

1. Global Single Type
2. Global Component

The footer can go in there and anything else that is rendered across the app that is not page/component specific 😃

[Oculux314]

Looks pretty swick!

Just have a few queries before approving:

• Logo is optional in Strapi but crashes the page if it doesn't exist
• If I upload any image format other than large, the page crashes
• Consider using usePathname instead of window.location.pathname
• For openMenu and closeMenu, I think you don't actually need to disable scrolling! Also, I think it might be better to use state to control the flex/none state of hamburg-options, rather than using querySelector.
• Love the mobile/desktop view comments, but if you need them consider if maybe they'd be better off as their own components
• New pages might conflict with other pages - would recommend deleting before merging

I like that it doesn't crash if there are no links. Also, the conditional tailwind is pretty cool, and I like the design.

P.s. Raymond I appreciate how modular the global Strapi component is 👍