[feat] implements the navbar

[kevin3656]

🎋 Description

🌴 What's new in this PR

• Implemented Nav Bar Component in components. icon redirects to homepage. cases, limited cases and language support redirect to cases page for now.
• changed authbuttons implementation from cases page to navbar.
• added ijp logo to icon in assets
• Added NavBar Component to cases page, settings page and auth layout.tsx

🌲 Screenshots

🌳 How to review

From the homepage you should be able to navigate across pages using nav bar, when logged in nav bar should change to show profile instead of log in/sign up buttons
can check implementation on src/components/NavBar

🌱 Next steps

• update hover effect on links
• fix backlink on settings page(currently overlaps with navbar)

🔗 Relevant Links

ℹ️ Online sources

https://www.youtube.com/watch?v=SLfhMt5OUPI

🪴 Related PRs

CC: @varortz

[linear]

IJP-109 Navigation Bar

[ccatherinetan]

the nav bar looks rlly good! I couldn't fully review this because the cases page is erroring for me, so i couldn't check the functionality of clicking on cases/language support etc on the navbar... is anyone else having the same problem? (the font also doesn't show up for me? maybe that's a me thing)

i caught 1 place where the navbar component was erroneously added (in (auth)/email-verified). overall, good job! i'll check back in once we figure out the error w/ the cases page T^T

[jinkang-0]

To reduce redundancy and keep merge errors at a minimum, I would recommend placing the NavBar component in app/layout.tsx.

This may sound like lunacy, but hear me out.

Since the NavBar will have to be a client component anyways (to access the profile context), it will also be able to access the router, and by extension, the current URL / path of the browser. With this information, we can:

1. Keep the logic of determining which tab is "active" in the component itself (no need to pass props)
2. Determine whether to show or hide the NavBar depending on the URL
3. Easily update the logic of the two points above inside the NavBar component if we ever decide to change it (without affecting other files)

This may bring a significant change to what you have right now, but I would highly encourage adopting this paradigm as it is used commonly in practice, due to it's ability to take advantage of the layout provided by Next.js to avoid re-rendering the NavBar each time we visit a new page.

And also make our lives easier. Merge conflicts bad.

[jinkang-0]

looks good kevin! should be good after addressing some minor nits and prettier complaints!
one note: don't forget to remove the back link on the settings page as well!

[jinkang-0]

lgtm!

[varortz]

NAVBAR LOOKS AMAZING!!! Thank you Kevin for working on this throughout semester, you killed it :)