Left nav tree component to support nested levels of navigation

[szinta]

Closes #1363

Add support for level two nesting in left side navigation menu using carbon's TreeView component.

Screenshot of side nav with 2 level nesting

Changelog

New

• packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js
• packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.module.scss
• packages/gatsby-theme-carbon/src/util/NavTree.js
• packages/example/src/pages/level-two - dummy pages for the demo of 2 level nesting

Changed

• packages/example/src/data/nav-items.yaml
• packages/gatsby-theme-carbon/gatsby-node.mjs
• packages/gatsby-theme-carbon/src/util/NavItems.js
• packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
• packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js

Removed

• none

~The below listed are the pending tasks/known issues which needs to be fixed~

• [x] Next & Previous links not working properly for level 2 pages
• [x] Style customisation as per Figma
• [x] if Level 2 contains only one item render it as level 1 leaf node
• [x] Resource links are not working with TreeNav as it is created using SideNavLink component

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gatsby-theme-carbon	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 10:04pm

[netlify[bot]]

✅ Deploy Preview for gatsby-theme-carbon ready!

Name	Link
🔨 Latest commit	ddf9a52402bfab07333ba3cba62cc2175951f771
🔍 Latest deploy log	https://app.netlify.com/sites/gatsby-theme-carbon/deploys/66c3c0a8d8ec8900084505d4
😎 Deploy Preview	https://deploy-preview-1502--gatsby-theme-carbon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[oliviaflory]

@szinta this looks really great!

I agree with @alisonjoseph that we could label the tree nav demo a bit better

What do you two think of either of these two options?

1. Demo level X
2. Demo tree nav level X

And a small change after we decide what the nav items should be called: the navigation label and the lead space title should always be the same text ie "Page 3" and "Page 3" or "Demo level 1" and "Demo level 1".

[alisonjoseph]

I prefer the first option I think.

[oliviaflory]

Thanks @alisonjoseph! @sintaibm here's a mock up of the tree demo exposed and the lead space title example:

[szinta]

@oliviaflory Using identical titles for multiple leaf nodes at the same level (for instance, having all the leaf nodes under Demo level 1 titled Demo level 2) is not feasible. So, I’ve adjusted the titles for those leaf nodes. Please review the updated titles and provide feedback or suggestions for improving the navigation menu titles and page description.

[alisonjoseph]

Yes, that works!

[alisonjoseph]

Small issue remaining with icon color in dark mode.