129 make navbar dynamic

[h4yleysh4rpe]

Context

Creating a navbar for smaller screen widths, including mobile view. This should not only make it much easier for mobile users to navigate the site, but also help the mobile view compatibility, as the header no longer takes up the same fixed width across the whole page anymore.

Closes #129

What Changed?

• Created two new components - server-side SmallNavbarFetcher and client-side SmallNavbar.
• Created arrow svg's which live in the svg folder
• layout.tsx now contains both header components and renders conditionally based on screeen width
• Small navbar now shows up instead of the header for screen widths < xs (size in tailwind.config).

How To Review

Can review commit wise. Please check that all commit messages are satisfied as well as -

• no weird scaling issues, especially for reasonable mobile widths
• all pages are able to be navigated to

Notes

• I accidentally called the branch 129_make-branch-dynamic instead of navbar so just keep that in mind sorry!
• There is quite a long delay time sometimes when clicking link -> moving to new page, so just keep that in mind

[h4yleysh4rpe]

@Oculux314 @belleyong @jessicazeng13 just a cheeky little nudge in case you did not see this! No pressure I know it is busy times :)

[Oculux314]

Sorry for the late review (and thanks for the reminder)! This looks great, and it'll be really helpful for everyone viewing the website on a phone. (The animations are a nice touch btw)

Here's the changes I suggest before merging:

• There's a lot of functionality shared between this and the regular navbar! Would you be able to extract the getHeaderData() function and HeaderData type into their own files? (use your version of the function :D)
• Could you make the arrows clickable? At the moment clicking the arrows themselves does nothing 🙃
• Consider keeping just one version of the arrow svg, and extract out the other icons into separate components) (Those icons are awesome btw! How'd you generate them?)

[h4yleysh4rpe]

Have updated my code wrt Nate's requests so feel free to review when u get a chance!

[belleyong]

Have updated my code wrt Nate's requests so feel free to review when u get a chance!

@h4yleysh4rpe I'm unable to run localhost without changing the code as I'm currently working with strapi and there is things that doesn't match up with strapi so im unable to physically test your amazing changes but I had a look at the code and it looks amazing!

[belleyong]

lgtm!

[Oculux314]

This looks super awesome, happy to merge! Wow feels so responsive

A few minor things you could consider for brownie marks (optional & feel free to merge straight after I trust):

• Projects after members
  
  
  Would be nice to have the order of the projects tab be the same across the two navbars
• Merge the small_navbar and header folders
• Filename: headerData.tsx -> headerTypes.tsx (headerData is ambiguous)

[Oculux314]

Oh also I think the white bar at the very top is being caused by an outline in layout.tsx xD

[jessicazeng13]

The navbar looks all good to me! There still is that little white line up top for me which nate said was a thing in the layouts.tsx file?