Global NavBar - Desktop, Tablet

[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, 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 desktop and tablet only, a separate issue will cover mobile.

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 on desktop and tablet.

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:

• Global NavBar - Desktop, Tablet #493
• Edit existing designs as needed
• Designs are edited and ready for engineering.

Branding:

Use the Home Unite Us logo

Known Limitations:

• This issue doesn't include mobile, a separate issue will include mobile

Team Reviews:

• Product - Bryce
• Design - Ed
• Engineering - Erik