Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add side nav tree #1363

Open
mattrosno opened this issue Oct 30, 2023 · 0 comments
Open

Add side nav tree #1363

mattrosno opened this issue Oct 30, 2023 · 0 comments

Comments

@mattrosno
Copy link
Member

mattrosno commented Oct 30, 2023

Summary

This is an extension of #1362 that should be completed together.

The current side nav is limited by one level of nesting. This has resulted in a cluttered side nav, and an overly aggressive use of page tabs.

The Carbon core team built an entirely new way to do this in Carbon Platform by taking the (now stable) TreeView component (part of Carbon v11):

https://react.carbondesignsystem.com/?path=/docs/components-treeview--overview

And then theming and customizing it to work as a side nav with multiple levels of nesting. The Carbon Platform doesn't have an example of level two nesting, but here's an example from the design spec:

image

Justification

This will allow much needed UX and IA improvements for the various Carbon local system (PAL) websites that are build with the Carbon Gatsby Theme.

Desired UX and success metrics

Match the coded TreeNav component used in Carbon Platform: https://next.carbondesignsystem.com

Here's the design spec used to build Carbon Platform, in case a bug is identified in Carbon Platform: https://www.figma.com/file/UkKF0SLT3qUmGoXQFVKtXT/RL_Library_Navigation?type=design&node-id=0-1&mode=design&t=unaj7OSZxa6uc7Zp-0

Must-have functionality

This is the current nav data model:

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

I'm thinking we'd want to support a second level of links with a YAML structure like:

- title: Menu
  pages:
    - title: Page 1
      path: /menu/Page-1
    - title: Page 2
      pages:
        - title: Level two page
          path: /menu/page-2/level-two-page
        - title: Another level two page
          path: /menu/page-2/another-level-two-page
- title: Single Page
  pages:
    - path: /single-page

Like the side nav heading issue, any changes to the nav data should included updated documentation.

Both of these issues would needed to be completed without breaking changes. Because these enhancements only add to the nav data model, that should be possible.

Development considerations

Here is the Carbon Platform source for NavTree that could be lifted and shifted. Because the nav data model is different, this requires more than a copy paste job. The styling overrides could be used directly, but the logic to parse the nav data will have to be different.

https://github.com/carbon-design-system/carbon-platform/tree/main/services/web-app/components/nav-tree

Because the latest version of the Gatsby theme uses Carbon v11, this should be possible without having to update any Carbon versions.

Specific timeline issues / requests

N/A

Available extra resources

@glapadre might consider contributing this enhancement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant