Navbar shown on landing page on mobile

[undergroundwires]

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

Using version 3.6.3 with docs module, navbar is rendered as hamburger menu on landing page with empty contents, however it's not seen on desktop version.

You can test it live on the webpage I'm setting up: privacylearn.com

Reproducible demo

No response

Steps to reproduce

1. Open website in mobile
2. On top right, hamburger menu is visible, clicking on it results in empty list

Expected behavior

No menu on mobile, just like on desktop for consistency

Actual behavior

Hamburger menu is visible, clicking on it results in empty list

Your environment

No response

Self-service

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

[slorber]

Not a bug, you likely broke it with custom CSS

It can only be considered a bug if you provide a runnable repro that removes all your custom CSS

[undergroundwires]

Hi, I'm sorry this is not open-source yet but it will be.
Thank you for your time useful guidance instead of just ignoring it.
As open-source maintainer myself, I know how much time consuming/effort this takes so it's highly appreciated.

I figured out the problem. Leaving solution here as future reference.

I see on docusaurus.io that this is the behavior too.
So navbar is supposed to be visible on the landing page.

In that case, the bug is that the menu list items are not being populated:

I see that this is caused as setting navbar CSS affects also the hamburger menu.
I set CSS like this in docusaurus.config.ts:

// ...
    navbar: {
      // .
      items: [
        {
          to: '/windows',
          label: 'Windows',
          position: 'left',
          className: withDefaultClass('navbarLink', 'nav-item__link', 'nav-item__link-windows'),
        },
        {
          to: '/macos',
          label: 'macOS',
          position: 'left',
          className: withDefaultClass('navbarLink', 'nav-item__link', 'nav-item__link-macos'),
        },
        {
          to: '/linux',
          label: 'Linux',
          position: 'left',
          className: withDefaultClass('navbarLink', 'nav-item__link', 'nav-item__link-linux'),
        },
        {
          href: 'https://privacy.sexy',
          label: 'Go to privacy.sexy app',
          position: 'right',
          className: withDefaultClass('navbarLink', 'nav-item__link', 'nav-item__link-privacysexy'),
        },
      ],

As you see, I created and used withDefaultClass to add default class names explicitly:

function withDefaultClass( // Because setting class overrides theme default
  defaultClassName: keyof typeof DefaultCssClassNames,
  ...classNames: string[]
): string {
  return [DefaultCssClassNames[defaultClassName], ...classNames].join(' ');
}
// ..
const DefaultCssClassNames = {
  footerLink: 'footer__link-item',
  navbarLink: 'navbar__link navbar__item',
};

Adding the default styles (navbar__link navbar__item) breaks the behavior.
I see that default style are appended anyways, so removing these solved the issue.

The reason that I added default styles manually was because was footers.
Because setting className was not appending but overriding the existing styles.
So I used this:

    footer: {
      links: [
        {
          title: 'Operating systems',
          items: [
            {
              label: 'Windows',
              to: '/windows',
              className: withDefaultClass('footerLink', 'nav-item__link-windows'),
            },
            {
              label: 'macOS',
              to: '/macos',
              className: withDefaultClass('footerLink', 'nav-item__link-macos'),
            },
            {
              label: 'Linux',
              to: '/linux',
              className: withDefaultClass('footerLink','nav-item__link-linux'),
            },
          ],

This this inconsistent behavior that using className for navbar is appending classes but using className in footer replacing may be considered a bug.

[slorber]

This this inconsistent behavior that using className for navbar is appending classes but using className in footer replacing may be considered a bug.

Thanks for reporting, we'll merge footer columns/links className in upcoming v3.7 (#10796)