How to add frosted glass effect without affecting the sidebar display on mobile phones

[kakomonn]

When I add frosted glass effect to the navigation bar, the sidebar on the mobile phone cannot be displayed correctly.
It turns into what it looks like in the picture, did I make a mistake somewhere in the css style below?

But it displays as expected on the desktop.

/* navbar */
.navbar {
  box-shadow: none;
  
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(12px);
  opacity: 1;
}