Automatically include navbar right content in mobile navbar

[njwhc]

Describe the problem this feature request is solving Provide Cashmere consumers an easy way to add navbar right content (account dropdown, help menu, etc) into Cashmere's mobile navbar.

In the non-mobile navbar, the right content items typically trigger a popover. However, popovers do not necessarily lend themselves well to a mobile environment.

As is, each consumer of Cashmere must decide how to handle and style this content in the mobile menu. Having Cashmere provide such functionality would allow different apps to have a more consistent look and feel and provide users a consistent experience.

Describe the solution you'd like @andrew-frueh, @jacquie and I met to discuss some options. The first step we identified would be to get this issue created to solicit input from other Cashmere stakeholders. Andrew shared the following mockup that shows two potential solutions:

The first idea is shown above the horizontal rule. The Help menu would cause a secondary mobile nav menu to slide in and show the help menu context. This would provide a familiar experience for mobile users, but would likely be more difficult to implement than the second option.

The second approach is below the horizontal rule. In that case, the right content has been inlined into the mobile navbar. This would likely be easier to implement, but may make the navbar too long.

Which components will have to change, and how

• At least NavbarComponent and NavbarMobileMenuComponent
• This work may result in making the NavbarMobileMenuComponent redundant; its elimination would reduce Cashmere consumers' need to create two menus

[benjanderson]

I like it, however I think it is important to recognize mobile and desktop are different paradigms. Here are some thoughts around options for each menu item:

• Option to only be visible for desktop, mobile, or both(default)
• Option for anchor (hyperlink) with target _blank or normal
• Ability to subscribe to click events
• Icon or Text or both
• Sub-menu where its children are fully capable menu items
• Mobile menu item has the option of closing menu on click or keeping it open
• Non clickable menu item (like username)
• spacer (I'm not sure how this would work on desktop)

[andrew-frueh]

Closing this one for now since we've added better documentation around the mobile menu in the new mobile development section.