App Template and UI Pkg - Applet Nav As Tabs Part 2

[slathrop]

Background

• A follow-on to App Template and UI Pkg - Applet Nav As Tabs #31 and App Template and UI Pkg - Quick Actions/Quick Steps Implementation #22
• This option has to be responsive to screen size
  • On mobile, width may only allow a few applet icons to be visible, so better to simply fallback to launcher menu in that case (that's the kind of approach seen in O365/SharePoint)
  • Even on desktop, depending on screen size and count of applets, horizontal space may be insufficient, so a calculation would be necessary to determine how many icons will fit, and then a final rightmost icon could be rendered with a dropdown menu containing the remaining icons. This avoids having to scroll (or on mobile, drag) horizontally
  • It would also be a good design idea to avoid having only a single icon in the hypothetical, rightmost dropdown menu. It would be better to leave "whitespace" on the right and have at least 2 icons in the dropdown

Tasks

• Implement conditional content in launcher
  • When horizontal "tabs" are visible, no reason to also show icons in launcher, so use that space for larger "Recent Items" area, links to other O365 apps, etc.
• Implement responsive horizontal icons w/ overflow to dropdown
• Give user an indication of where they are, esp. when on "help" or other non-applet pages
• Testing, refactoring, documentation
• Integrate template changes into a solution