Add side nav heading

[mattrosno]

Summary

The current side nav is limited by being a single list with one level of children:

The Carbon core team added headings to the side nav in Carbon Platform (see "Catalogs" example):

Let's bring that to the Gatsby theme so other sites can also benefit from the improved information architecture.

Justification

This allows website maintainers to group and categorize nav items. It can be used to simplify and improve information architecture.

Desired UX and success metrics

The visuals, behavior, etc. should match the side nav heading in Carbon Platform: https://next.carbondesignsystem.com

You can see the side nav heading used in this Carbon Platform design spec, but I'd view the coded side nav the source of truth unless a bug is identified: https://www.figma.com/file/M1UolPMDngdACDMMLU7WpX/v1_landing_pg_redlines?type=design&node-id=0-1&mode=design&t=CT82XGPPKAwhWeb2-0

Must-have functionality

This is the current nav data:

- title: Menu
  pages:
    - title: Page 1
      path: /menu/Page-1
    - title: Page 2
      path: /menu/Page-2
- title: Single Page
  pages:
    - path: /single-page

Any number of headings should be supported. Only top level. I'm thinking something like this would work by adding support for:

- heading: My heading.

- heading: My heading
- title: Menu
  pages:
    - title: Page 1
      path: /menu/Page-1
    - title: Page 2
      path: /menu/Page-2
- heading: Another heading
- title: Single page
  pages:
    - path: /single-page

Development considerations

This was built as part of the NavTree component in Carbon Platform. Source here: https://github.com/carbon-design-system/carbon-platform/tree/main/services/web-app/components/nav-tree

Carbon Platform's nav data is different. Instead of YAML it is authored as a JavaScript object. The screenshot of Carbon Platform above is set by this data:

export const assetsNavData = [
  {
    title: 'Catalogs',
    isSection: true,
    items: [
      {
        title: 'Assets',
        items: [
          {
            path: assetTypes.component.path,
            title: assetTypes.component.namePlural
          },
          {
            path: assetTypes.function.path,
            title: assetTypes.function.namePlural
          },
          {
            path: assetTypes.pattern.path,
            title: assetTypes.pattern.namePlural
          },
          {
            path: assetTypes.template.path,
            title: assetTypes.template.namePlural
          }
        ]
      },
      {
        path: '/design-kits',
        title: 'Design kits'
      },
      {
        path: '/libraries',
        title: 'Libraries'
      }
    ]
  }
]

As such, this won't be a copy/paste job. (E.g. the heading comes from the title key in Carbon Platform, and I'm recommending we use the heading key in the YAML data model.)

Also, I'll create a separate issue for upgrading the current side nav to the new NavTree. Since in Carbon Platform this is coming from the same component, I recommend doing this and that other issue in the same pull request.

Specific timeline issues / requests

N/A

Available extra resources

@glapadre may consider contributing this enhancement.