Compare commits
4 Commits
version_2_
...
version_3_
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c8bb978b95 | ||
| 8c3a2fc53a | |||
| f11f9580a4 | |||
| 2b9683dc44 |
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
|
||||
import { Plus, ArrowRight } from "lucide-react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import Button from "@/components/ui/Button";
|
||||
@@ -51,8 +51,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
<>
|
||||
<nav
|
||||
className={cls(
|
||||
"fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
|
||||
isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
|
||||
"fixed z-1000 top-3 left-3 right-3 transition-all duration-500 ease-in-out",
|
||||
isScrolled ? "h-15 bg-background/80 backdrop-blur-sm rounded-lg" : "h-20 bg-background/0 backdrop-blur-0"
|
||||
)}
|
||||
>
|
||||
<div className="relative mx-auto flex items-center justify-between h-full w-content-width">
|
||||
@@ -89,15 +89,11 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<AnimatePresence>
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
{menuOpen && (
|
||||
<div
|
||||
ref={menuRef}
|
||||
initial={{ y: "-135%" }}
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "-135%" }}
|
||||
transition={{ type: "spring", damping: 26, stiffness: 170 }}
|
||||
className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded card"
|
||||
|
||||
className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg card"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<p className="text-xl text-foreground">Menu</p>
|
||||
@@ -131,9 +127,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
<div className="mt-6">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user