Dynamic navbar: navbar item activation strategies

[Yorkemartin]

🚀 Feature

An example:

I have three instances of docs, each segmented into three categories with their respective sidebars: "concepts" "guides" and "reference". These docs can be called "V1" "V2" and "V3", but are fixed docs once released so versioning isn't helpful in the canonical sense. When on "V2"-"Concepts" - clicking the Guides button on the navbar will take me to "V2"-"Guides", along with the appropriate sidebar.

Have you read the Contributing Guidelines on issues?

yes

Motivation

I'm trying to make the above work and have been unsuccessful after many days of wrangling

Pitch

It seems useful to have navbar routing that can accommodate multiple doc instances

[slorber]

Hi,

I'm not totally sure to understand your usecase, a better description would be appreciated, and also if you can put a deploy preview of your doc site with 3 docs instance online on Netlify/Vercel/whatever, that would help to figure out the UX you try to achieve.

This looks kind-of related to #3930

My idea was we could build a generic system where each navbar item has an "activation strategy".

This means the navbar items could be different on a per-route basis, for both mobile and desktop.

This "strategy config" must be:

• serializable (provided in Docusaurus config, but must be usable on client-side code)
• composable, so that user has flexibility to create advanced rules

Here's a badly designed example:

const navbarItems = [
  {
    to: "/guides/",
    label: "Guides",
    when: { routeMatch: "/guides/.*" }
  },
  {
    to: "/api/ios",
    label: "iOS API",
    when: { plugin: { name: "@docusaurus/plugin-content-docs", id: "ios" } }
  },
  {
    to: "/api/android",
    label: "Android API",
    when: {
      type: "and",
      items: [
        { plugin: { name: "@docusaurus/plugin-content-docs", id: "ios" } },
        { routeMatch: "/guides/.*" }
      ]
    }
  }
];

We could work on defining a few useful activation conditions and the API surface, and also enable composition with AND/OR logic.

Is this what you are looking for?

[Yorkemartin]

This would address my issue perfectly, I would love it if this were implemented

[dswiecki]

@slorber Hi, thank you for a great tool ;) do you have this feature on 2.0.0 roadmap ?

[slorber]

@dswiecki this has been requested quite often so we'll build it, however this is not the simplest one to design, and we have more important features to work on in the short term, cf the beta blog post https://docusaurus.io/blog/2021/05/12/announcing-docusaurus-two-beta#whats-next

[Josh-Cena]

Hey, multiple people have asked me whether it's possible to only display certain navbar items when user is logged in (by sending HTTP requests).

I like the activeWhen API, and I think we can make the type be like:

activeWhen: {strategy: string, params: any}

And then have a custom @theme/useNavbarItemIsActive hook, meant to be swizzled if the user wants additional logic so that this is accessible on the client side.

[slorber]

We are a static site generator and not a hybrid framework like Next.js.
This means that we can only check for user authentication status once in the browser.

Having navbar items that require user authentication means that there will be navbar layout shifts happening after React hydration, and I'm not sure it's a good pattern to encourage: the strategies should rather work on the server to avoid layout shifts. But if we allow custom user-provided strategies we can't really prevent the user to do that anyway.

This post section explains the problem with gifs: https://www.joshwcomeau.com/react/the-perils-of-rehydration/#schrodingers-user:

---

And then have a custom @theme/useNavbarItemIsActive hook, meant to be swizzled

My plan was more to have a map of strategies in @theme/NavbarStrategies/index.tsx, similar to what we have for NavbarItem. I think having an empty map of custom strategies could also be useful so that user can swizzle a smaller part: @theme/NavbarStrategies/CustomStrategies.tsx.

We should probably add something similar to allow providing custom Navbar Items. .
I'd like the infrastructure to look similar in both cases and make it easy to extend/maintain (small swizzle API surface).

I can support you if you want to work on this

[Josh-Cena]

My plan was more to have a map of strategies in @theme/NavbarStrategies/index.tsx,

I can't think of many use cases besides loggedIn and routeMatch 🤦‍♂️ But having a CustomStrategies.tsx is similar to what I have in mind

Agree that there will be layout shifts, but that doesn't sound like what we can help anyways (I've seen this behavior on a lot of sites using REST API for login). We can allow the user to set a default render state to minimize the impact, maybe?

the strategies should rather work on the server to avoid layout shifts

Makes sense. Strategies that we offer should conform to this, but we probably can't limit the users too much either

In any case, I might set my hands on this if no-one will be working on this soon

---

I imagine the API surface to be like:

export default function useNavbarItemStatus({type, params}): 'active' | 'disabled' | 'hidden' {
  return NavbarStrategies[type](params);
}

And then called in NavbarItem:

export default function NavbarItem({type, activeWhen, ...props}) {
  const status = useNavbarItemStatus(activeWhen);
  switch (status) {
    case 'hidden': return null;
    case 'disabled': return <NavbarItemComponent disabled {...props} />;
    case 'active': return <NavbarItemComponent {...props} />;
  }
}

So that you can do something like:

const navbarItems = [
  {
    to: "/guides/",
    label: "Guides",
    activeWhen: { type: 'routeMatch', params: "/guides/.*" }
  },
  {
    to: "/concepts/",
    label: "Concepts",
    activeWhen: { type: 'routeMatch', params: "/concepts/.*" }
  },
  {
    to: "/secret/",
    label: "Secrets",
    activeWhen: { type: 'loggedIn' }
  },
];

We can even have the syntactic sugar

type Strategy = { type: string, params: any} | {[type: string]: any}

to make the API close to what you have