bender/2f4a8395-4a4f-4603-ac5f-6cb0700119b7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply glassmorphic effect to the navbar

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-05-08 06:54:49 +00:00
parent e6016ab864
commit fa3a31282b
1 changed files with 8 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ui/NavbarFloating.tsx
View File

@@ -1,5 +1,4 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Plus, ArrowUpRight } from "lucide-react"; import { Plus, ArrowUpRight } from "lucide-react";
import { cls } from "@/lib/utils"; import { cls } from "@/lib/utils";
import Button from "@/components/ui/Button"; import Button from "@/components/ui/Button";
@@ -32,21 +31,17 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
return ( return (
<> <>
<AnimatePresence>
{menuOpen && ( {menuOpen && (
<motion.div <div
initial={{ opacity: 0 }}
animate={{ opacity: 0.15 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.4 }}
className="fixed inset-0 z-999 bg-foreground" className="fixed inset-0 z-999 bg-foreground"
onClick={() => setMenuOpen(false)} onClick={() => setMenuOpen(false)}
/> />
)} )}
</AnimatePresence>
<nav className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width"> <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"> <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> <a href="/" className="text-xl font-medium text-foreground">{logo}</a>
@@ -66,15 +61,9 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
</button> </button>
</div> </div>
<AnimatePresence>
{menuOpen && ( {menuOpen && (
<motion.div <div className="overflow-hidden">
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="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="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"> <div className="px-3 xl:px-4 2xl:px-5 py-0 md:py-1 2xl:py-2 rounded card">
{navItems.map((item, index) => ( {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" /> <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
</div> </div>
</motion.div> </div>
)} )}
</AnimatePresence>
</div> </div>
</nav> </nav>
</> </>