Invalid Table of Contents links outside of "Usage" tab.

Description

When I am at any doc page covering a component which contains a table of contents - if I navigate to the Props or Theming tab I expect any link under the table of contents to navigate me back to the “Usage” tab and then to the related section. Instead, the relative links supplied only append to the current URL.

(i.e. In the FormControl Page: https://chakra-ui.com/docs/components/form-control/props#sample-usage-for-a-radio-or-checkbox-group)

Consideration(s);

• Supply the links under the table of contents relative links that begin with usage (a short-term solution)
• Provide a table of contents specific to the Props and Theming tabs (maybe preferred as this new navigation structure continues to be fleshed out)

[noobinthisgame]

This issue will be resolved with the docs rework we are currently working on.

[TylerAPfledderer]

Hey @nikolovlazar ! Following up on this.

In addition to the proposal I made above, would then alter the areas of PageContainer

const { title, description, editUrl, version, headings = [] } = frontmatter

The above destructuring would then also pull out the slug and then check if the end of the slug is props or theming (so not usage)

 const {
    slug,
    title,
    description,
    editUrl,
    version,
    headings = [],
  } = frontmatter

const isNotUsageTab = /(props|theming)$/.test(slug)

Then when rendering the table of contents…

{!hideToc && !isNotUsageTab && (
  <TableOfContent
    visibility={headings.length === 0 ? 'hidden' : 'initial'}
    headings={headings}
  />
)}

So only show the table if you are on the usage tab.

That’s what I got at this point. 😄 Looks like the table of contents is not getting headings for the props and theming content that have been added anyway, so this would still be a temporary solution if the table needed to be rendered properly for the other tabs.