docs: add group titles to navigation

[lukaselmer]

Description

Add group titles to navigation for better visual grouping

Solution and Design

before:

after:

Limitations, known bugs & workarounds

There are certainly "cleaner" implementations than "abusing" the existing categories. On the other hand, we don't change existing code, and only add a couple of new lines.

The following things could be improved:

• Add aria-* properties to the new div
• The inline styles could be converted to a CSS class name, and the styles could be moved to css / scss
• Add an additional group title "Other" or "Technical" to group the stuff after "Security tools"
• I didn't run any tests - I don't even know if this functionality is tested automatically :)

Catalog upgrade

Does this PR change Hasura Catalog version?

• No

Metadata

Does this PR add a new Metadata feature?

• No

GraphQL

• No new GraphQL schema is generated

Breaking changes

• No Breaking changes

[hasura-bot]

Beep boop! 🤖

Hey @lukaselmer, thanks for your PR!

One of my human friends will review this PR and get back to you as soon as possible.

Stay awesome! 😎

[CLAassistant]

All committers have signed the CLA.

[robertjdominguez]

Thanks for this contribution, @lukaselmer! We have an internal PR that solves it in a similar way.

For each heading desired, a new file is created in this format in the /docs directory:

_heading_<heading_name>.mdx

Then, frontmatter is added to the file:

---
sidebar_position: 10
sidebar_label: 'Basics'
sidebar_class_name: sidebar_heading
---

The sidebar_heading class is parsed in /src/theme/DocSidebarItem/Link/index.js to determine whether to render a <Link /> or a <li />. Headings cannot be clicked; thus, they're returned simply as <li />.

Additionally, to prevent a user from navigating to an empty page (as all _heading_<heading_name>.mdx pages are), the pathname is parsed in /src/components/CustomDocItem/index.tsx and, if _heading_ is included in the pathname, the user is redirected to the index of the docs site. Navigating to one of these routes is only achievable by a user explicitly typing in the address.

 if (props.location.pathname.includes('_heading_')) {
    return <Redirect to="/docs/latest/index/" />;
  }

Altogether, it looks like this. We'll consider aspects of your approach, and many thanks for your ideas in #9696 on the two-column layout inside a docs page 🤙

[robertjdominguez]

Thanks again @lukaselmer 🤙

You can see our merged update here.

[hasura-bot]

Beep boop! 🤖

Hey @lukaselmer!

Sorry that your PR wasn’t merged.

Do take a look at any of the other open issues to see if you’d like to take something up! We’re around on Discord if you have any questions 😄