Add Navigation flyout panel

[rebeccaalpert]

Background

UXD is contributing to Composer AI Studio. As part of this work, Mark Riggan created wireframes for what their UI could look like. These wireframes included a flyout panel that comes out when a nav item is clicked.

Example:

When "Chats" is clicked, you would see the panel with "Start your first conversation."

Specifications:

• The panel can contain buttons, forms, loading states, error messages, or any other type of content.
• It should close when users click outside of it or hit the escape key
• It should "float" over the main body content
• It should match the height of the main navigation.
• It should be positioned at the top of the main navigation.
• It would need to receive focus when opened and have a focus trap.
• When closed, it should place the focus back on the main navigation item that opened it.
• It should have appropriate aria attributes.

For mobile, suggestions have been made to make it full width on top of the navigation on mobile like this ugly mock-up:

Explain why this feature is needed and/or why these requirements cannot be met using existing components.

We need a way to offer more complex user interactions that relate to the page content.

We attempted initially to create this using the Navigation Flyout Nav. However, the React implementation uses Popper.

• Popper programmatically positions the menu content so it is close to the triggering nav item, rather than the entire sidebar as a whole. It is difficult to override this because it is done via inline styles.
• There is no way to identify when Popper is open without an event listener, so it is difficult to programmatically set the height of the panel to match the main navigation.

If this is for specific applications, list them here along with any dates that you need this for.

This is for Composer AI Studio. However, both Andrew and Nicole reported having seen similar concepts for other products.

Link any detailed design documents, rough sketches, wireframes or workflows.

• Wireframes

State whether this is a new feature or an enhancement on an existing pattern by labeling it accordingly

I guess this is an enhancement?

If this is an enhancement to an existing feature, identify the feature that you want to modify.

This would be a flyout menu attached to the Navigation component, similar to the flyout nav. However, it would be the full height of the nav sidebar and be positioned at the top of the nav sidebar. We would need it to to be well behaved on mobile and also desktop.

[rebeccaalpert]

@thatblindgeye took a look at a crappy implementation I did so we could start working through potential issues.

It sounds like if we were to do this, we'd want the trigger to be a button rather than a link, with aria-haspopup="dialog" and an aria-expanded.

We have some open questions I'll bring up at working session:

• Should it actually close when users click outside of it? It seems like that could be bad for forms, etc.
• Whether it makes sense to have links in the nav that aren't nav items per se
  • Eric did find an example of a nav on W3c that consisted of a paragraph with links.