search

Impactworkers / iw-complaint-manager

Impactworkers Complaint Manager
1 stars 0 forks source link

Create header #58

Open rnair-tw opened 5 months ago

rnair-tw commented 5 months ago

User Story

As a user, I want to have a header at the top of the system, So that I can easily access global actions and information at any time.

Business Context:

A header enhances the usability of the system by providing quick access to important actions and information, such as the system logo, user profile, notifications, and navigation links. It provides a consistent and intuitive user experience across the platform.

In Scope

  1. Displaying the system logo on the top left.
  2. User profile indicator and access to log out - the functionality to log out will not be part of this story. Please use the user initials on the profile image at this moment (same as we do today on the CM)

Out of Scope

  1. Ability to navigate to user profile menu, log out, etc.
  2. Profile image is not clickable yet

Mockups

(https://www.figma.com/design/Qpewv3nKANuv7qm4oJd2Xy/Hi-Fi_Mockups?node-id=242-85472&t=Wgy0nMaoR9RyZP3u-0)

Component Library

https://www.figma.com/design/q94M03R0e8fErv05lJxJmx/Core-Component-Library?m=dev&node-id=10-3022

Acceptance Criteria

  1. Scenario: Header Display Given a logged-in user, When they access any section of the system, Then they should see a header at the top of the page with the system logo and user profile icon (based on their name) Screenshot 2024-07-02 at 1 59 24 PM (2)
mariliasoaresTW commented 5 months ago

@justin-c-anthony @rowsnr please list out the components that should be created in Storybook.

CwoodsTW commented 4 months ago

https://mui.com/material-ui/react-app-bar/ Ideas for different headers. Side nav bar will be below header. Header should stick to top of page.