[FEAT] External Static Pages > Navbar component

taiwonaf commented 4 months ago

Description

Develop the navbar displayed on all the pages.

Create a navbar component that displays the app logo, navigation links, and login and get started buttons.
This component should have props to allow for a logged in and logged out state (meaning, the login and get started buttons should only be shown when the user is not logged in)
This component should allow for mobile responsiveness.
Write unit tests for this component to model expected behavior.

Provides a component for showing the navbar.

Ensure that the typography (text colors, font weights, font sizes, etc.) remain consistent with the design.
Ensure that the card design (border colors, background color, text content, etc.) remains consistent with the design.
Ensure that the logo is a link to the home route of the application.
Ensure that the component is responsive on mobile devices by displaying the hamburger shown in the design and implementing the mobile navbar that shows when the hamburger is clicked.
Ensure that the authentication related buttons (login and get started) are not shown when the user is logged in.
Ensure that the title of the current page is highlighted as shown in the design.
Ensure that the profile and notification are shown when the user is authenticated.

[ ] Create a navbar component
[ ] Account for authenticated state by removing the login and getting started buttons when user is logged in and showing the notification and profile.
[ ] Integrate the shadcn button component for the buttons on the component.
[ ] Make the navbar responsive for mobile devices.
[ ] Write unit tests to ensure the component works as expected.