chore(documentation-site): NO-JIRA enhance sidebar

[juliodialpad]

Enhance sidebar

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will not increment the version number, but will still deploy to documentation site on release:

• Documentation
• Build system
• CI
• Style (code style changes, not css changes)
• Test
• Other (chore)

📖 Description

• Enhanced the sidebar with recursive capacities to be able to nest children within children.
• Moved /content to /guides/content.
• Added the ability to expand/collapse categories.

💡 Context

Nested categories requested by Francis.

📝 Checklist

For all PRs:

• I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
• I have reviewed my changes.
• I have considered the performance impact of my change.

📷 Screenshots / GIFs

[francisrupert]

Awesome! Good use of Collapsible.

I'll list some comments below as individual comments rather than one long one:

[francisrupert]

The Content page should have its own grid of child items listed too, like the attached faked screenshot below.

Those same items should not appear on the Guides landing page.

[francisrupert]

When arriving on the Guides page, the Content item should remain collapsed.

[francisrupert]

The Content left-nav item should be a single target. Clicking anywhere on the row expands and navigates to that page, it does not collapse.

[francisrupert]

The "Content" item should be same text style as its peers.

[francisrupert]

At the moment, we only want items that have children to be a Collapsible. That is, only "Content" on Guides should be collapsible.

The following left-nav titles should not be collapsible:

• "Guides" on Guides.
• "Components" on Components.
• "Design language" on Design language.
• Each left-nav section on Utilities.
• "Design Tokens" on Tokens.
• "About" on About.

As an example, arriving on Guides should appears like so...

[hynes-dialpad]

I agree with @francisrupert. Other than that, this LGTM!

[francisrupert]

Officially marking as "request changes", refer to standalone comments above.

[francisrupert]

Remove the d-pl8 from the first level. It should only be there for the nested one.

👎	👍

[francisrupert]

On Guides' landing page, only the items seen in Guides' leftnav should appear as a card.

[francisrupert]

The Content section should be collapsed if the current page is not within Content section.

Screen.Recording.2024-07-12.at.3.46.01.PM.mov

[francisrupert]

The leftnav should not expand when arriving at a page. Perhaps this is a limitation of DtCollapsible, but it appears to be collapsed onload and then expand onload.

Screen.Recording.2024-07-12.at.3.48.47.PM.mov

[juliodialpad]

The leftnav should not expand when arriving at a page. Perhaps this is a limitation of DtCollapsible, but it appears to be collapsed onload and then expand onload.

Screen.Recording.2024-07-12.at.3.48.47.PM.mov

Thought it'd not collapse once opened by this comment

The Content left-nav item should be a single target. Clicking anywhere on the row expands and navigates to that page, it does not collapse.

Misunderstood the behavior, fixing it 😅

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[hynes-dialpad]

One small change here to increase the space between sections between sections on the Utilities page.

[hynes-dialpad]

On the components page, there should be a gap of 500 between the sections.

Current

Proposed Update

[juliodialpad]

Fixed

[francisrupert]

The "Previous|Next" pagination doesn't exist. Unless it's a super quick fix, can probably just log a task to fix later.

[francisrupert]

I think there's a backlog item for better RWD view of all navigation, but this ain't pretty. If you can't find a backlog item, create it.

[fede-dp]

This looks 100% better, great job!
one small comment here:
this one is bold

and this one isn't

is this on purpose?
because if we open the main 'content' tab, that one should be bold like every other tab, right? or we keep it that way for something in particular? in their child options works fine but not in the main category.

[juliodialpad]

The "Previous|Next" pagination doesn't exist. Unless it's a super quick fix, can probably just log a task to fix later.

Fixed

[juliodialpad]

This looks 100% better, great job! one small comment here: this one is bold and this one isn't is this on purpose? because if we open the main 'content' tab, that one should be bold like every other tab, right? or we keep it that way for something in particular? in their child options works fine but not in the main category.

Thanks for catching that! Just fixed it.

[hynes-dialpad]

@juliodialpad Tertiary menu items are using d-fw-semi-bold:

Let's remove that utility class. The indentation is sufficient IMO

[juliodialpad]

I think there's a backlog item for better RWD view of all navigation, but this ain't pretty. If you can't find a backlog item, create it.

Found a ticket but not quite sure it's exactly what you're mentioning: https://dialpad.atlassian.net/browse/DLT-895

I did this fix in the meantime.

[juliodialpad]

@juliodialpad Tertiary menu items are using d-fw-semi-bold:

Let's remove that utility class. The indentation is sufficient IMO

Just pushed a fix that might address that.

[hynes-dialpad]

@juliodialpad I still was seeing the font weight so I went ahead and make the corrections myself. Please review and let me know.

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-406/

Josh approved it and Francis is OOO. Everything looks LGTM