Frontend - Header Quick Menu

[kevin-kasunic]

Context

Users of the Grant Finder Tool want a way to easily access their "My Profile" user account and manage their team(s) no matter what screen they are currently on within either tool.

Current State

• In the Grant Finder Tool, a Quick Menu current exists in the top ribbon, with limited fields available (see below).

• The ARPA Reporter does not currently have a Quick Menu for users to adjust their user account or team information.

Open Questions

None

Future State (design)

• The Grant Finder will have an improved Quick Menu that can be easily accessed from the top ribbon of the tool.
• Desired Info/Fields within the Quick Menu are as follows:

(Display, Not Editable) Name/Initials/Team name
(Display, Not Editable) My Profile -- this should go to the /my-profile page
(Display, Not Editable) Give feedback --- should open this link in a new tab: https://form.jotform.com/212007960331041
(Display, Not Editable) Training Guide -- should open this link in a new tab https://go.usdigitalresponse.org/hubfs/Grants/USDR-Federal-Grants-Finder-User-Guide-Sep2023.pdf
(Display, Not Editable) Sign out

• Future State Mock Figma:

https://www.figma.com/file/gi975Am6lHBFbjCZeVBzb5/Settings?type=design&node-id=618-17726&mode=design&t=nF7VLubxCpnL5uWt-4

Within Figma see "Frame 84", AKA "Entry Point"

[andreafalke4]

@kevin-kasunic file is updated here https://www.figma.com/file/gi975Am6lHBFbjCZeVBzb5/Settings?type=design&node-id=633%3A20155&mode=design&t=7Eg67RgOP8DovVC4-1.

Please let me know if there is anything missing or if dev has any additional needs within how I set up the file.

[ClaireValdivia]

NOTE - dependent on #1588 being completed - work can start on this one but will eventually need to be merged as both are working on header component

[ifranch]

Since this change was designed, there was a new dropdown option added for "Training Guide" in #1950. Should that stay in the future state, and if so should it be added to the mocks since each option has a different icon? @ClaireValdivia since I'm not too sure who is working on the design currently.

[ClaireValdivia]

Thanks for catching this, Ines! Yes, we want Training Guide to stay as a link. @caitlinwinner thoughts on an icon that can be used there for consistency?

[caitlinwinner]

for training guide, how about "book"

https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=634-17346&mode=design&t=WAFTgFxGCOJvvdi3-4

[caitlinwinner]

Looking in the figma design library, it says these are bootstrap icons @inesfranch

[ClaireValdivia]

tested and looks great in staging, matches design and decisions on new icons.