Sidenav should support nested links OR content projection on the main body

[isaaclyman]

Describe your idea

hc-sidenav should support links that have children (e.g. the SidenavLink interface should have a recursive children field) or it should support content projection in the main body (and provide a context variable indicating if the nav is expanded or collapsed).

The first option would be preferable so more of the behavior can be abstracted away, but the second might be easier to implement.

What problem are you trying to solve?

We've found that SidenavComponent lacks some key features we'd need in order to use it in BDS apps. We have nested links (up to 3 levels deep) in our sidenav, which is a necessity due to the number of pages in our apps, but also nice for keeping links organized.

We still use hc-drawer, which works fine, but it would be nice to get the look and feel of hc-sidenav.

[corykon]

@isaaclyman I've got a similar request from another application, so i'm going to get working on it soon.

Could you send me a screenshot of your current nav, and/or a list of the nav structure you after to make sure I meet the needs with the changes I make?

[isaaclyman]

PowerPlanning

Navigation, part 1

Navigation, part 2

Navigation, part 3

Hovered item

Colllapsed nav

PowerLabor

Navigation

Hovered item

Collapsed nav

[corykon]

Thank for that @isaaclyman. Here's where I'm headed. Call out anything you see that I'm missing.

Requirements

• Allow projection into the main body of sidenav
• Allow HTML input into each link (to support things like badges/statuses)
• Configurable sidenav widths
• Nested Links
  • Option to have nested link structure open by default
  • Option to allow collapsing nested link structures (or not)
  • Option to auto open a nested link structure if the parent link is active
  • Option to show or hide nested link structure lines
  • Option to make a link not clickable
    • (different than disabled… this item would have normal styling, just not be clickable)
• Dark mode
• Link Sections
  • Totally separate group of links with a header, styled like the Favorites section

Mock Ups

[isaaclyman]

Looks great, @corykon. How customizable are the labels of those links? You'll notice that there are a few cases where we show a status chip on the link, e.g. BETA. If there's a custom HTML option, that would be great, or something more specific - just so long as we're not restricted to a string.

[corykon]

Yeah that's a good callout :+1:

[andrew-frueh]

Love these updated concepts @isaaclyman and @corykon - adds a lot of depth to the side nav. Great work!