Sidenav: HuBMAP Apps

[LibbyUX]

Implement HRA version of HuBMAP shared navigation component

• Design menu options to pitch tomorrow at CNS UX specs
• Redesign every app header to feature this button with shared nav functionality

Resources:

• Data Portal: Use nav header button Resources and Apps icon to see menu
• HIVE UX-UI Collaboration Spreadsheet: HuBMAP Tools Text & Image Assets

[LibbyUX]

Status update:

• Moving all navigation areas to side nav for better mobile responsiveness. This feature will need to seamlessly fold into our existing and new side navs. Thank you @axdanbol for your help with this design!

TO DO

Design updates for nav bars current UIs:

• HRA Portal current implementation (mobile side nav in use currently)
• Dashboards (mobile side nav in use currently)
• Cell Distance Explorer
• FTU Explorer

Passing this to Katy today for review on FTU Explorer.

[LibbyUX]

Design Review

Passed to @katyb tonight for feedback or approval.

[katyb]

Text for

is incorrect

[katyb]

Where can I copy the text to make changes without retyping?

[LibbyUX]

@katyb and I edit the text together in the collaborative HIVE UX-UI HuBMAP Tools for Shared Navigation spreadsheet at 1:15pm.

@katyb, is this component approved now? Can you please provide approval in writing here on GitHub?

Shared Nav: HuBMAP Data Portal vs. HRA Portal styles

• Design System Repo Canvas: HuBMAP Nav Overlay Menu

[LibbyUX]

All edits have been made. Just waiting on approval. Thanks!

[LibbyUX]

[LibbyUX]

Sidenav: HuBMAP Apps

• Design System Components: Sidenav: HuBMAP Apps

Building Blocks

• Unique menu style:
  • Background blur
  • Lowered opacity
• Overlay-Scrollbar #521
• Button: Card - HuBMAP Apps #586
• Button: Mat-Icon-Button #573
• Fonts
  • Title font: Title Large
  • Section font: Title Medium
• Overlay background: #000000 at 48%
• Min/max widths to keep it responsive
• Perfect matching alignment with the Button: Mat-Icon-Button #573 40x40 variant from the menu overlay to the nav header access point

Usage

• HuBMAP's HIVE UX/UI Cross Collaboration team has created a menu to connect HuBMAP applications cohesively. This menu is accessed by clicking the apps icon button in our new navigation headers.

Variants

• Ready/default
• Hover (activate scrollbar when lower content needs room to grow)

Behavior

• This organism is responsive to smaller resolutions and should grow as specified with its min/max widths
• Overlay-Scrollbar #521 - Appears on hover, when content needs space to grow/scroll
• The bottom part of the menu will always stretch to fill the entire screen height

Angular Behavior

• Sidenav: Drawer with Explicit Backdrop Setting

Figma Interaction Specifications

[LibbyUX]

@axdanbol - Just wanted to bring this issue to your attention today. Happy Friday!!!

I will create a HuBMAP-styled version of this today for implementation on humanatlas.io immediately. This HuBMAP-styled variant will be deprecated after we implementing the redesigned HRA portal sometime in Y3.

I will only be changing the font type to Inter and I will change the font/icon colors probably to a unified #212121. The rest of the component is unchanged!

I will link this HuBMAP variant here when I have it!

[LibbyUX]

Update: I will open a separate issue for the HuBMAP styles app menu for the current humanatlas.io. This component is ready for development in our design system. Thanks!

[bhushankhope]

@LibbyUX . I have created a sidenav demo here. Please review. Thanks

[LibbyUX]

Updated issue here: #766