AppLayout – Improvements

[mkrause]

This is a follow up to #122.

There are a few improvements we'd like to make to the AppLayout components:

• Make AppLayout more ergonomic to use:
  • Less boilerplate to set up all the <main>, <header>, etc. elements. (DONE: introduced AppLayout.Xxx shorthands.)
  • To override NavItem with a custom Link element, currently the consumer must reimplement a bunch of styling, the icon, etc. Maybe we can add a prop to customize the Link component? (DONE: added a Link prop.)
  • Currently the consumer must manually set bkl-theme--dark on the various components. Should we do this out of the box?
• Enforce accessibility: e.g. need to enforce that unique aria-label are set if there are multiple Nav elements (each is a landmark).
• Collapsible sidebar. Should include tooltips for all nav menu items.
• Additional buttons in the header next to the user profile (e.g. notification bell, help menu).
• Fix up Storybook stories: more stories for subcomponents, fix the display in light mode.
• Breadcrumbs: should we have some margin by default underneath the breadcrumbs to space it out from the content? Maybe a trimmed prop in case the user wants to override it.
• Breadcrumbs should use a composition pattern (child elements) for the items rather than a JSON object.
• Should we have a Footer component?

Some minor issues:

• Fix the selected account being displayed as "account_Account 1" etc.
• Fix the styling of the "Add account" action in the Accounts dropdown.
• Add a "Manage solutions" action to Solutions dropdown.