Homepage Sidebar cannot be clicked on desktop widescreen

[BlazingTwist]

Description

Upon loading any page of https://mermaid.js.org none of the sidebar buttons are working if the browser is wide enough to display the sidebar by default.
Clicking on the sidebar instead clicks on the page content.

If the browser window is shrunk such that the sidebar is hidden, clicking the hamburger menu reveals a working sidebar.

If the browser is shrunk until the sidebar is hidden, then widened until the sidebar reappears, the sidebar also becomes responsive.
Reloading the page causes the sidebar to become unresponsive again.
But the sidebar stays responsive across page navigations (e.g. navigating from 'About Mermaid' to 'Getting Started' and back works)

Steps to reproduce

1. Load the homepage in desktop mode such that the sidebar appears by default (not hidden behind hamburger menu).
2. Try clicking on Sidebar dropdowns/links -> does not work

Screenshots

bugreport.mp4

Code Sample

No response

Setup

• Browser and Version:
  • Edge 116.0.1938.81
  • Chrome 117.0.5938.92
  • Firefox 118.0.1

Suggested Solutions

No response

Additional Context

No response

[shakthi2003-ice]

hey
Can you assign me this isssue?

[theayushkaul]

Hey , Can you please assign me this issue? I will surely correct this bug.

[BlazingTwist]

@shakthi2003-ice and @theayushkaul

I can't assign anyone (only contributors with write access can do that).

If you don't want to wait for that, personally I'd:

• call dibs ob the issue (so that others know you're working on it)
• make a fork
• fix the issue on my fork
• open a PR and link the issue (using '# 4894', without the space)

Granted, I'm weird, so your milage may vary.

[thallisphp]

Removing the "inert" attribute from .VPSidebar works

[huynhicode]

Thanks, @BlazingTwist for reporting.

Thanks, @shakthi2003-ice & @theayushkaul for your interest in working on this issue.

Issues are not assigned. Anyone is welcome to work on issues as they see fit. Please submit a PR when ready.

See contributing docs.

[tractorcow]

See vuejs/vitepress#2936 for the source of the issue. Fix is to rebuild docks with the correct version of vitepress. Downgrade to 1.0.0-rc11 or a higher version with the fix should suffice. I cannot see from the github actions which version it is resolving, but "vitepress": "^1.0.0-alpha.72", is the dependency.

[Pratik1603]

Hey, I would like to work on this issue

[esafak]

Just write a PR, guys, and say "fixes #4894" in the PR body.

@tractorcow How did you determine that? I see no error in the console.

[tractorcow]

I would assume just running the "build docs" action would do it, since this is the vitepress dependency.

    "vitepress": "^1.0.0-alpha.72",

But that's happened and the issue persists. 🤷

[mathbraga]

Hi, I tried replicating this locally in development and the bug did not occur, the app worked fine. Tagging #4902 for reference.

Tested browsers:

• Brave - 1.58.137
• Edge - 117.0.2045.47

bugtest.mp4

[konstantinblaesi]

As others already said the issue does not occur when building the docs locally, both in dev or production build mode. The deployed docs are broken because of the inert attribute being present on the initial load of the page. A resizing the window to make the sidebar hide and show again causes the inert attribute to disappear and thus solves the issue temporarily.

Can you please rebuild and deploy the docs?

[huynhicode]

This seems to have been resolved with the latest update to Docs.

Closing issue - please reopen if needed. Thanks!