html sidebar item should be translatable

[fgalz]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Docusaurus offers the possibility to add a "sidebar-title" using the HTML type. However, there is currently no option for a simple translation.

{
type: 'html',
className: 'sidebar-title',
value: 'Placeholder',
defaultStyle: true,
},

The function itself works again with the latest Canary version, but it can only be used in one language and is limited if you offer docs in several languages.

Reproducible demo

No response

Steps to reproduce

Add the sidebar-title, build it and check it. It's only available in the hardcoded language or rather the value that is set.

Expected behavior

The sidebar-title should be available in other languages as well, so there should be some sort of support for this.

Actual behavior

The sidebar-title (value) is hardcoded and therefore the same for all languages.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used: Canary
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[slorber]

I'll consider it as a duplicate of #4542

Suggested workaround, not an ideal api but will work to translate html navbar items: #4542 (comment)

[fgalz]

Hi @slorber,

can this also be used directly in the sidebar.js or are there limitations in this regard? Would you mind explaining in a little more detail how this can be implemented?

I followed the following approach:

sidebar: [
    {
      type: 'html',
      className: 'sidebar-title',
      value: (() => {
        switch (process.env.DOCUSAURUS_CURRENT_LOCALE) {
          case "de": return "GERMAN SIDEBAR TITLE";
          default: return "ENGLISH SIDEBAR TITLE";
        }
      })(),
      defaultStyle: true,
    },
    {
      type: 'category',
      label: 'Category',
      items: [
        "placeholder",
        "placeholder",
        "placeholder",
      ]
    },

The sidebar title "ENGLISH SIDEBAR TITLE" (default value) is displayed without any issues. However, the default value is also displayed for the "de" case of the German version. Am I missing something? My knowledge in this matter is rather limited, so I am grateful for any tips! :)

[slorber]

This works on our own website:

I just ran yarn start:website --locale de

If it doesn't work for you please create a runnable repro including the command you use to start in de lang

[Blumlaut]

Hi @slorber, we don't start the docs using a locale arg at all -- we use npm run docusaurus build to build it in both languages before deploying the docs.

As far as i could tell the sidebar code only gets run once when the en locale is generated, this doesn't seem to happen again for the de locale.

[slorber]

Runnable proof that it does after running yarn build:
https://stackblitz.com/edit/github-zcvn3b?file=sidebars.js,docusaurus.config.js

Please create a minimal repro next time

[Blumlaut]

Thank you, it seems our issue was that instead of export default sidebars; we still had module.exports = sidebars; at the end of the sidebars config, updating this has indeed resulted in the expected behaviour.