Create Header Component

[rluders]

Description

Create a fixed top header to the default application layout. It is 100% width and its height must be the same height as the sidebar logo (h-8 + py-4)

UI Resource

full size

The image is just a guide/reference and some differences in the final result are acceptable upon review.

API

n/a

Additional information

As a suggestion this component can be split into the following sub-components:

• Avatar (Create Avatar Component #55)
• MenuList
• MenuListItem (possible states: default, hover, active, disabled)
• UserDropdown
• UserDropdownMenu
• UserDropdownMenuItem
• Icon (Install Heroicons library #48)

MUST:

• The MenuList and the DropdownMenu components MUST receive objects as the parameter that contains all the menu items that need to be listed
• The Header must be fixed to the top of the main content, and at the right side of the sidebar
• The Header must have the same height as the sidebar's logo
• The Header must fill 100% of the Main content width
• ARIA attributes

DON'T:

• Write any custom CSS, please, use TailwindCSS only
• The icons don't need to exactly match with the ones from the reference image

Possible unknowns

None.

Dependencies

• Create Sidebar Component #44 (not a blocker)
• Create Avatar Component #55 (not a blocker - there is a basic avatar component)
• Install Heroicons library #48

Mentoring

This task offers mentoring.
If you need any help you can join our Discord Server and talk with the following users:

• Ricardo Lüders (@rluders)
• Mariany (@marianyfs)