Navigation Bar

[MatthewBlam]

Description

Sprint 2: now onto the frontend! We're starting with the admin's Home page. This will be the first thing they see and offers a general overview of the different components: trees, volunteers, and notifications. For this Sprint, we will separate each widget and major component into different issues to simplify concurrent development.

This task is focused on creating the navbar. This should be created in the /src/components/Navbar.tsx. Follow the design included below.

Because we have a separate issue for setting up the layout and incorporating the finished components, do not add your component(s) to the home page file when publishing your PR. That being said, for testing purposes, it is likely helpful to import your component(s) to the page, but just remember to remove it when you are done. Please include a screenshot of your component in your PR.

Notes

Since this is our first sprint working on the frontend, we will not be using component libraries for these issues. We believe it will serve as an important learning opportunity to create these components from scratch. Still, feel free to ask for help and access other resources, especially if you're newer to frontend development.

• Make sure to run git pull before any development work
• Complete your development in a new branch
• Link this issue to your PR
• Feel free to reach out if you have any questions!

Acceptance Criteria

The Navbar is implemented and follows the design scheme. The component is created in the appropriate folder, and subcomponent(s) are used.

Task

• Navbar includes logo at the top
• Nabar includes a profile subcomponent (ignore the log out button)
• Navbar includes the page tabs with icons
• Navbar includes functionality to switch between pages using the tabs (use 'ghost' pages as placeholders for now)
• Styling (font size/style, colors, corners, etc.) match the design

Additional Information
We have provided the icons in the team's Google Drive under /design/assets/. Please download the icons you need and upload them to the repo as part of your PR.

Here is a link to the team's Figma. If you do not have access, please message Sean or Matthew to be added. We highly recommend that you reference the Figma to get the exact color values, font size/style, corner radius, etc. The "Design System" page will be useful for this.