feat: remove solid background from navbar and add blur effect

Merge version_20_1778234396806 into main

src/components/ui/NavbarFloating.tsx

@@ -32,16 +32,14 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
   return (
     <>
       
-        {menuOpen && (
+        
-          <div
-            className="fixed inset-0 z-999 bg-foreground"
-            onClick={() => setMenuOpen(false)}
-          />
-        )}
       
 
       <nav className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
-        <div className="mx-auto w-full md:w-1/2 overflow-hidden rounded-theme-capped border border-white/10 bg-white/10 backdrop-blur-lg shadow-lg">
+        <div className={cls(
+          "mx-auto w-full md:w-1/2 overflow-hidden rounded-theme-capped border border-white/10 bg-white/10 shadow-lg",
+          menuOpen ? "backdrop-blur-lg" : "backdrop-blur-lg"
+        )}>
           <div className="relative z-10 flex items-center justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5">
             <a href="/" className="text-xl font-medium text-foreground">{logo}</a>