Docusaurus mobile sidebar not working with backdrop-filter

udoyhasan commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] 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.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

Hello everyone, I'm new to Docusaurus. I'm using it for about 1 month. I've built full documentation for my new react native app. I've used the Docusaurus Classic theme for the project. But the problem is when I visit the site on the computer it works well I can see the sidebar and the top navbar but when I visit it via mobile I can't see the sidebar and navbar. The responsive menu doesn't work on the mobile. Can anyone please suggest to me if it is my end problem or it is a bug?

On Computer:

On Mobile:

Reproducible demo

No response

Steps to reproduce

I just followed the official documentation to install Docusaurus with the classic theme.

Expected behavior

The mobile menu should have the same navbar and sidebar element

Actual behavior

Mobile menu renders as blank

Your environment

Docusaurus version used: 2.0.0-beta.17
Environment name and version: Chrome 99.0.4844.82, Node.js 16.13.0
Operating system and version Windows 11

Self-service

[ ] I'd be willing to fix this bug myself.

Josh-Cena commented 2 years ago

Hi, on mobile, all navbar items are displayed in the sidebar drawer instead.

Does that clear your doubt?

udoyhasan commented 2 years ago

@Josh-Cena Thank you for your response. But in my case, it is showing empty.

Josh-Cena commented 2 years ago

It looks you are not on an actual mobile. Can you reproduce this on an actual mobile?

udoyhasan commented 2 years ago

Hello, it is the default menu. I just added one line on custom css backdrop-filter:blur(20px) and by the way I'm using an local search plugin with the main Docusaurus. Plugin name is @easyops-cn/docusaurus-search-local

Josh-Cena commented 2 years ago

Sees to be the same issue as https://github.com/facebook/docusaurus/discussions/6853

udoyhasan commented 2 years ago

Yes, you are right. Thank you for your help :)

Josh-Cena commented 2 years ago

backdrop-filter is a pretty new feature and it could be broken for us. If you could narrow it down, we can see where we need to improve on.

udoyhasan commented 2 years ago

@Josh-Cena Sure. I'd love to help and also sorry for the late response as my teacher came at that time and I was reading. But now when I become free I try to check the code deeply and I think I've found the problem and its fix.

The main reason for this problem

If we preview a Docusaurus website via a computer then we can notice that there is a primary navigation tag <nav class="navbar navbar--fixed-top">...</nav> and inside that there are no child elements.

So when a developer wants to use the glass effect on the primary navigation they simply edit the css/custom.css file and put backdrop-filter there.

nav.navbar.navbar--fixed-top {
  backdrop-filter: blur(25px);
}

It works well on the widescreen displays but it throws a problem on the small screen displays. As on the small screen displays Docusaurus appends a new sub-element <div class="navbar-sidebar">...</div> inside the <nav class="navbar navbar--fixed-top">...</nav> element. So here the main problem occurs as per the backdrop-filter applying rule, we should never use backdrop-filter on a parent element. So the problem is basically when a users use a widescreen display then the main menu has no child so it works well but on the other hand, when users use a small screen display it appends a new child inside the menu and thus it becomes a parent element and the problem occurs.

To Fix the problem:

Instead of using the simple CSS code to make the backdrop-filter apply in all-width devices. We can use @media so that it can apply the backdrop-filter only on the widescreen displays and on the small screen displays it will not apply the backdrop-filter.

Old Code:

nav.navbar.navbar--fixed-top {
  backdrop-filter: blur(25px);
}

New Code:

@media (min-width: 1000px) {
  nav.navbar.navbar--fixed-top {
    backdrop-filter: blur(25px);
    background: var(--ifm-top-menu-color);
  }
}

Note: The min-width depends on the user Docusaurus menu items. In my case, I've many items on the primary menu so my mobile menu is from 0px-999px and computer menu is from 999px+ so I've settled the min-width:1000px.

@Josh-Cena Thank you again for mentioning #6853 as the problem. Though I didn't get any answer there still it help me to find out that the main problem was in the backdrop-filter :)

Josh-Cena commented 2 years ago

I see. I think it should be easier than currently, and I do believe we should try to keep the DOM structure consistent 👍 Thanks a lot for that insightful analysis!

udoyhasan commented 2 years ago

You are welcome :)

Josh-Cena commented 2 years ago

Sorry, it was pretty late yesterday and my brain wasn't working😅 Looking back, your solution is exactly what's needed. It's not a workaround but the right approach. I'll close this then. Hope this could help others as well!

dinowxyz commented 1 year ago

I encountered a similar problem. The issue seems to be that the backdrop-filter styling from the top nav bar gets extended to the sidebar as well, causing an unintended blur.

Using @media sizes to control the styling doesn't target the actual components themselves. This works ok for mobile but not for desktop. For example, you still want your nav bar to have the blur effect in all media sizes but you don't want your nav bar styling to affect your sidebar styling. The solution I found was to target the following class:

.navbar-sidebar--show {
  backdrop-filter: none !important;
}

oyatek commented 4 months ago

thank you, I was pulling my hair out trying to understand why my menu has disappeared. Same issue.

facebook / docusaurus