Feature/navbar - edited the navbar component to match new designs in figma

[ZhaoYuLL]

Closes #136

• [x] Edited React Component
  • Edited the previous text blocks in the navbar
    • "About" -> "Mission"
    • "Apply" -> "Get Involved"
    • The actual links have not been changed
• [x] Mobile Responsive (hamburger button)
  • Renders the button using SVG
  • Used Tailwind to create a Desktop navigation menu and a mobile/small screen navigation menu
• [x] Buttons Link to respective pages
  • Created a navigation link array on the top of the file for easier changing of texts and links in the future

Reference

Desktop View

Mobile/Small Screen View (Expanded Dropdown Menu)

Mobile/Small Screen View (Collapsed Dropdown Menu)

• Figma Mockup

[ZhaoYuLL]

yo made some changes: -change '/about' to '/mission' and '/apply' to '/community' -added bolding and a transition underline effection when user hovers over text

• pure white bolding is really hard to see on the background so i used very light yellow -changed appearnce of navbar to be like the current site
• Same padding as before

Navbar changes (Left browser has current running site, right is current branch)

Hovering on Desktop Navbar

Hovering on Mobile Dropdown Menu

[miguel-merlin]

@j-ferber Usually on feature branches its better to rebase. Next time you can try git pull origin main --rebase

[j-ferber]

@miguel-merlin my bad, will do next time. did it affect the PR?

[miguel-merlin]

Nah, you're good @j-ferber

[ZhaoYuLL]

Removed verbose comments and increased dropdown menu size, text size, etc, as well as the hamburger icon. Let me know if you want me to change the size again

Mobile Display