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

Switch to version 2: modified src/components/ui/NavbarCentered.tsx

Browse Source
This commit is contained in:
bender
2026-05-08 10:51:18 +00:00
parent 87f94db9ac
commit 3618d167ee
1 changed files with 44 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/ui/NavbarCentered.tsx
View File

@@ -1,6 +1,5 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Plus, ArrowRight } from "lucide-react";
import { Plus, ArrowRight } from "lucide-react"; import { Plus, ArrowRight } 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";
@@ -52,8 +51,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
<> <>
<nav <nav
className={cls( className={cls(
"fixed z-1000 top-3 left-3 right-3 transition-all duration-500 ease-in-out", "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
isScrolled ? "h-15 bg-background/80 backdrop-blur-[2px] rounded-lg" : "h-20 bg-background/0 backdrop-blur-0" isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
)} )}
> >
<div className="relative mx-auto flex items-center justify-between h-full w-content-width"> <div className="relative mx-auto flex items-center justify-between h-full w-content-width">
@@ -90,46 +89,51 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
</div> </div>
</nav> </nav>
<div <AnimatePresence>
ref={menuRef} {menuOpen && (
className={cls( <motion.div
"md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px] transition-all duration-300 ease-in-out", ref={menuRef}
menuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none" initial={{ y: "-135%" }}
)} animate={{ y: 0 }}
> exit={{ y: "-135%" }}
<div className="flex items-center justify-between mb-6"> transition={{ type: "spring", damping: 26, stiffness: 170 }}
<p className="text-xl text-foreground">Menu</p> className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded card"
<button
className="flex items-center justify-center shrink-0 size-9 rounded cursor-pointer primary-button"
onClick={() => setMenuOpen(false)}
aria-label="Close menu"
> >
<Plus className="w-1/2 h-1/2 text-primary-cta-text rotate-45" strokeWidth={1.5} /> <div className="flex items-center justify-between mb-6">
</button> <p className="text-xl text-foreground">Menu</p>
</div> <button
className="flex items-center justify-center shrink-0 size-9 rounded cursor-pointer primary-button"
<div className="flex flex-col gap-4"> onClick={() => setMenuOpen(false)}
{navItems.map((item, index) => ( aria-label="Close menu"
<div key={item.name}>
<a
href={item.href}
onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
className="flex items-center justify-between py-2 text-base font-medium text-foreground"
> >
{item.name} <Plus className="w-1/2 h-1/2 text-primary-cta-text rotate-45" strokeWidth={1.5} />
<ArrowRight className="size-4 text-foreground" strokeWidth={1.5} /> </button>
</a>
{index < navItems.length - 1 && (
<div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
)}
</div> </div>
))}
</div>
<div className="mt-6"> <div className="flex flex-col gap-4">
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" /> {navItems.map((item, index) => (
</div> <div key={item.name}>
</div> <a
href={item.href}
onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
className="flex items-center justify-between py-2 text-base font-medium text-foreground"
>
{item.name}
<ArrowRight className="size-4 text-foreground" strokeWidth={1.5} />
</a>
{index < navItems.length - 1 && (
<div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
)}
</div>
))}
</div>
<div className="mt-6">
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
</div>
</motion.div>
)}
</AnimatePresence>
</> </>
); );
}; };