Floating UI: Navbar

[davidtsilcock]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the Modus style guidelines

Proposal

This is a ticket outlining the work to be done on the Navbar in the floating UI style that has been discussed with the modus team.

This development can be carried out by the Creator/Nexus team.

Original Navbar:

Floating UI Navbar:

Trimble Creator Navbar:

We would like to develop this as a modus web-component, and then contribute it back to modus

Motivation and context

Floating UI is a critical part of a canvas-style application such as Trimble Creator, SketchUp, Maps, and more. This UI allows the user to focus more o the creative space rather than the encompassing UI.

What is the issue regarding ?

@trimble-oss/modus-web-components

Priority

Medium

What product/project are you using Modus Components for ?

Trimble Creator

What is your team/division name ?

Nexus

Are you willing to contribute ?

Yes

Are you using Modus Web Components in production ?

Not yet, this will be one of the first steps on our migration to web-components in Trimble Creator.

[msankaran0712]

Question to clarify:

• Border radius - Need to wait for what MoAB decides
• What are the elements that can go in between hamburger menu and profile menu also the positioning of the elements

[soniakaukonen]

MoAB decisions 9/22/2023:

• Corner radius should be the same as Toolbar component, Figma - 4px
• https://www.figma.com/file/wyfVJUHWRMkeCfdB38HFEE/Modus---Web?node-id=23208%3A3351&mode=dev
• Spacing between each floating element inside the Navbar is 4px.
• Minimum requirement for navbar elements: logo and user profile. Others optional. Currently no restriction. @msankaran0712

[davidtsilcock]

Great, thanks Sonia! We will have to start back up on the floating UI work after dimensions, as we will no longer have time to fit it into our sprints before then. it'll be picked back up early-mid November.