Allow navbar items to be hidden based on path

[kiwicopple]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Motivation

I would like to show/hide navbar items based on the path. For example

• /docs/cli - show a github link and version dropdown for our CLI
• /docs/supabase-js - show a github link and version dropdown for our client libraries

Implementation idea

The NavBar Item has a field activeBaseRegex, which I thought I could re-purpose for this, but it appears this function doesn't run on all NavBar items (only "Navbar link"). If this can be applied to all top-level links, then we could use the navbar__link--active CSS class to show/hide navbar items

One more thing

Thank you! We really love Docusaurus at supabase 🦖 . I'd be happy to swizzle this and test it on a live site if someone could let me know what approach to take

Self-service

• I'd be willing to do some initial work on this proposal myself.

[Josh-Cena]

Duplicate of #4389. You can find some useful tips there. I'm going to close this for now—if you have further questions feel free to either ask under that issue or open a discussion.

[kiwicopple]

got it, thanks for the link to the other issue - it really helped. For anyone coming here, this is how I solved it:

I added a custom regex to my navbar item (supabaseCustomNavBarRegex)

  {
    to: 'gotrue',
    position: 'left',
    label: 'GoTrue',
    supabaseCustomNavBarRegex: '(^/gotrue$|gotrue/)',
  },

Then I swizzled the NavbarItem, and show/hide based on the regex:

import React from 'react'
import { useLocation } from '@docusaurus/router'
import { isRegexpStringMatch } from '@docusaurus/theme-common'
import NavbarItem from '@theme-original/NavbarItem'

export default function NavbarItemWrapper(props) {
  const { pathname } = useLocation()
  if (
    !props.supabaseCustomNavBarRegex ||
    isRegexpStringMatch(props.supabaseCustomNavBarRegex, pathname)
  ) {
    return <NavbarItem {...props} />
  } else {
    return null
  }
}

[slorber]

Great solution.

In terms encapsulation it's not 100% ideal because if the component itself decide to render null, the parent component (responsible for placing the navbar items in the navbar) wouldn't know it, and could still apply some margin/spacing that shouldn't be there.

We'll implement something similar, but we'll likely filter the navbar items in the parent component