From fa3a31282bd37a2579d77d2403208ffe4006fd2d Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Fri, 8 May 2026 06:54:49 +0000
Subject: [PATCH] feat: apply glassmorphic effect to the navbar

---
 src/components/ui/NavbarFloating.tsx | 27 ++++++++-------------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/NavbarFloating.tsx b/src/components/ui/NavbarFloating.tsx
index 7f8370e..dce6b28 100644
--- a/src/components/ui/NavbarFloating.tsx
+++ b/src/components/ui/NavbarFloating.tsx
@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowUpRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -32,21 +31,17 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
 
   return (
     <>
-      <AnimatePresence>
+      
         {menuOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 0.15 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.4 }}
+          <div
             className="fixed inset-0 z-999 bg-foreground"
             onClick={() => setMenuOpen(false)}
           />
         )}
-      </AnimatePresence>
+      
 
       <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 backdrop-blur-sm card">
+        <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="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>
 
@@ -66,15 +61,9 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
             </button>
           </div>
 
-          <AnimatePresence>
+          
             {menuOpen && (
-              <motion.div
-                initial={{ height: 0 }}
-                animate={{ height: "auto" }}
-                exit={{ height: 0 }}
-                transition={{ duration: 0.5, ease: [0.625, 0.05, 0, 1] }}
-                className="overflow-hidden"
-              >
+              <div className="overflow-hidden">
                 <div className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 pt-0 xl:pt-0 2xl:pt-0">
                   <div className="px-3 xl:px-4 2xl:px-5 py-0 md:py-1 2xl:py-2 rounded card">
                     {navItems.map((item, index) => (
@@ -101,9 +90,9 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
 
                   <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
                 </div>
-              </motion.div>
+              </div>
             )}
-          </AnimatePresence>
+          
         </div>
       </nav>
     </>