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

feat: add smooth opening animation to navbar using CSS transitions

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-05-08 10:36:35 +00:00
parent da4cfcc1ba
commit ae40e9e616
1 changed files with 40 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
import { useState, useEffect, useRef } from "react";
import { Plus, ArrowRight } from "lucide-react";
import { Plus, ArrowRight } from "lucide-react";
import { cls } from "@/lib/utils";
import Button from "@/components/ui/Button";
@@ -89,46 +90,46 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
</div>
</nav>
{menuOpen && (
<div
ref={menuRef}
className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px]"
>
<div className="flex items-center justify-between mb-6">
<p className="text-xl text-foreground">Menu</p>
<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} />
</button>
</div>
<div className="flex flex-col gap-4">
{navItems.map((item, index) => (
<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}
<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>
</div>
<div
ref={menuRef}
className={cls(
"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",
menuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
)}
>
<div className="flex items-center justify-between mb-6">
<p className="text-xl text-foreground">Menu</p>
<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} />
</button>
</div>
<div className="flex flex-col gap-4">
{navItems.map((item, index) => (
<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}
<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>
</div>
</>
);
};