Internal View: NavBar

[idil-bit]

!!! DUE DEC 10TH !!! (both this and other ticket)

Purpose

You will be working on the navbar for the internal view! This will be a reusable component and set the foundation for the rest of the internal view. This will be a sprint with two mini tickets for you so please move on to the second ticket (also assigned to you) and work on it in another branch! Both will be due on the same day together but since this navbar will be shared amongst the internal view, this ticket will be done first :)

Getting started

• Move this ticket to the In Progress column
• Get updated with the codebase (git checkout dev, git pull, create a new branch by git checkout -b [branchname] as per README, npm install to update your dependencies, npm run dev)
• Create and open demographics/page.tsx and components/Navbar.tsx

Implementation of NavBar

Creating the component props:

• Create the basis of the component in components/Navbar.tsx and import it to demographics/page.tsx so you can use and test it there. (use placeholder values when testing it - for user first name, last name, profile picture link. ask us about this if confusing!) all the following will be done in components/Navbar.tsx
• This component will take in props that will have the following fields
  • currentTab (this will mean that the user is "currently on this part of the internal view") (string - will look like "inventory", "demographics", or "categories")
  • firstName (string)
  • lastName (string)
  • pictureLink (string that will have the link to the image to be displayed)
  • Use the design in the attached image and the Figma details as your guide, but trust your judgment in what looks the best / closest to the Figma design! The number of pixels, etc. on Figma are not always the most accurate
• Feel free to reference the banners from customer and volunteer pages

Building the frontend styling:

• Add the logo using the next.js resource for images below
• Add the three tabs, where only inventory will have a valid link (for now)
  • Check out the dynamic assignment link below to see how you can highlight only the tab that that matches the currentTab
• Add the name and profile picture, and the arrow that will prompt open a dropdown that will help the user navigate to different pages (only sign out will redirect the user at this stage, and it will redirect to the login page in login/page.tsx)
  • Create the dropdown. The dropdown will only be visible when the arrow is clicked - check out the useState and visibility resources below!

Submit for Review

• Create a PR for this ticket
  • add yourselves as assignees and Jiyoon as the reviewer to the PR
• move this ticket to the Ready for Review column

Helpful Resources

1. For layout: https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01
2. Images via Next.js https://nextjs.org/docs/pages/api-reference/components/image
3. useState in React: https://react.dev/reference/react/useState
4. Visibility and using &&: https://www.dhiwise.com/post/the-ultimate-guide-to-react-click-outside-modal-to-close#:~:text=16-,Integrating%20the%20Modal%20into%20a%20React%20App,-Importing%20and%20Rendering
5. Dynamic Assignment - look at the react examples here: https://css.master.co/docs/dynamic-assignment

Pictures (click to get to its figma)