Global NavBar - Mobile

[randelbrot]

Problem Alignment

The Problem:

Home Unite Us users (Coordinators, Guests, and Hosts) do not currently have a clear and simple way to navigate to global (i.e., not user specific or section specific) functionality after logging into the Home Unite Us application.

As a result, users cannot access critical functionality within the application on mobile, including Settings, Help, and Log Out.

High Level Approach:

Provide a simple navigation bar for all users types that links to critical functionality only (Settings, Help, Log Out). This phase will focus on mobile only, Issue #493 addresses desktop and tablet.

Solution Alignment

Considerations:

• This phase will only include links for critical functionality, additional functionality will be added in the future (e.g., notifications).
• This phase will include the Home Unite Us logo, future phases may support custom organization logos

Goals & Success:

Success is if each user type can easily navigate to critical functionality after logging in on mobile.

Key Features:

• Navigation bar

  • Left-aligned: Home Unite Us logo
  • Right-aligned: Avatar with the user's first and last initial (no photo)

• Dropdown, when the avatar is clicked -Settings: when clicked, redirect users to a placeholder Settings page -Help: when clicked, open in a new tab: https://github.com/hackforla/HomeUniteUs/wiki/Home-Unite-Us-User-Guide -Log Out: when clicked, redirect users to the Home Unite Us home page (homeunite.us)

Design:

• [x] Review existing designs
• [X] Edit existing designs as needed
• [X] Designs are edited and ready for engineering.

Figma

Branding:

Use the Home Unite Us logo

Known Limitations:

• This issue focuses on mobile only
• This issue focuses on navigation for a user who has logged in

Team Reviews:

• [x] Product - Bryce
• [X] Design - Kayla
• [X] Engineering - Jose

[JpadillaCoding]

availability: Friday- 6pm-9pm, Sat&Sun- 7am-9pm ETA: Sunday