[FE] Navigation Bar

[parkerra]

Overview

We need a desktop and mobile-friendly navigation bar for the Caregiver pages. The Admin portal has an existing navigation bar which is desktop only and does not need to be mobile-friendly, the styles need to be updated. It's okay to make a Caregiver navbar separately from the Admin navbar since sometimes it's difficult to make existing pages mobile-friendly.

Link to Figma: https://www.figma.com/design/1eq6iy7h2Cd7rYTxPB4s5P/Motherhood-Beyond-Bars-%2F-Spr2022-(Copy)?node-id=6212-1439&node-type=CANVAS&t=IzQT02xW96dasVs1-0

Requirements

• Update current Admin navbar with new styles
  • Create a component in components/logos for the logo in the corner. The component should have if it is an Admin or Caregiver logo as a parameter, and when it is clicked if should link to the home page (for now either /admin or /caregiver), so the entire component should be clickable and inside a button
• Create top bar component in components/logos that contains the page title and button to open navbar on mobile views (three lines in left corner)
  • For the three-lined button, implement the functionality to open the navbar after creating the navbars
• Implement mobile navbar for Caregivers in components/molecules
  • When the navbar is open in mobile, the part of the screen without the navbar should be dark and the navbar should close when the user clicks the dark part
  • Add functionality in Top Bar to open navbar when three-lined button is clicked. Create component in components/molecules that combines the top bar and navbar so that the three-lined button in the top bar can be used to open the navbar
• Add desktop views to Caregiver navbar component, the navbar should always be anchored on the left without the option to open and close it
• Edit logic for showing navbar in _app.tsx, currently the SideBar component is shown at all times for Admin views except on /book pages, so for Caregiver views, show only the navbar on Desktop, and show the combined mobile navbar component on mobile. The top bar for Desktop pages will be handled on those pages where needed

Important Information

• Make pages for mobile first, then extend them to Desktop
  • Use Tailwind's reactive design breakpoints to style for both mobile and web: https://tailwindcss.com/docs/responsive-design
• Use DevTools to resize the screen for different screen sizes including tablets both vertically and horizontally
• Test this on your phone, it's important for making sure the keyboard doesn't cover anything and native components look alright!

Testing on Phone

Run the program on your computer using npm run dev, then on your phone on different common browsers (Google Chrome, Firefox, and Safari if iPhone), go to https://[your IP address]:[port (probably 3000)]/page. Example: https://123.45.67.89:3000/login. Make sure both your phone and laptop are connected to the same WiFi.

How to find your computer's IP Address:

• Windows: ipconfig then scroll to Wireless LAN adapter Wi-Fi -> IPv4 Address
• Mac: ipconfig getifaddr en0

Don't hesitate to Slack me if you need any help or have any questions :D We can message or jump into a Huddle meeting as needed!