102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
"use client";
|
|
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { IoIosMenu, IoIosClose } from "react-icons/io";
|
|
import { Logo } from "../Logo";
|
|
import { useMotionValueEvent, useScroll } from "framer-motion";
|
|
|
|
type NavItem = {
|
|
title: string;
|
|
link: string;
|
|
target?: "_blank";
|
|
children?: NavItem[];
|
|
};
|
|
|
|
type Props = {
|
|
navItems: NavItem[];
|
|
};
|
|
|
|
export const MobileNavbar = ({ navItems }: Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { scrollY } = useScroll();
|
|
|
|
const [showBackground, setShowBackground] = useState(false);
|
|
|
|
useMotionValueEvent(scrollY, "change", (value) => {
|
|
if (value > 100) {
|
|
setShowBackground(true);
|
|
} else {
|
|
setShowBackground(false);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex justify-between bg-white items-center w-full rounded-full px-2.5 py-1.5 transition duration-200",
|
|
showBackground &&
|
|
"bg-neutral-50 shadow-[0px_-2px_0px_0px_var(--neutral-100),0px_2px_0px_0px_var(--neutral-100)]"
|
|
)}
|
|
>
|
|
<Logo />
|
|
<IoIosMenu
|
|
className="text-black h-6 w-6"
|
|
onClick={() => setOpen(!open)}
|
|
/>
|
|
{open && (
|
|
<div className="fixed inset-0 bg-white z-50 flex flex-col items-start justify-start space-y-10 pt-5 text-xl text-zinc-600 transition duration-200 hover:text-zinc-800">
|
|
<div className="flex items-center justify-between w-full px-5">
|
|
<Logo />
|
|
<div className="flex items-center space-x-2">
|
|
<IoIosClose
|
|
className="h-8 w-8 text-black"
|
|
onClick={() => setOpen(!open)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-start justify-start gap-[14px] px-8">
|
|
{navItems.map((navItem) =>
|
|
navItem.children && navItem.children.length > 0 ? (
|
|
navItem.children.map((childNavItem) => (
|
|
<Link
|
|
key={`${navItem.title}-${childNavItem.title}`}
|
|
href={childNavItem.link}
|
|
onClick={() => setOpen(false)}
|
|
className="relative max-w-[15rem] text-left text-2xl"
|
|
>
|
|
<span className="block text-black ">
|
|
{childNavItem.title}
|
|
</span>
|
|
</Link>
|
|
))
|
|
) : (
|
|
<Link
|
|
key={navItem.title}
|
|
href={navItem.link}
|
|
onClick={() => setOpen(false)}
|
|
className="relative"
|
|
>
|
|
<span className="block text-[26px] text-black ">
|
|
{navItem.title}
|
|
</span>
|
|
</Link>
|
|
)
|
|
)}
|
|
</div>
|
|
{/* Login/Signup buttons - uncomment to enable authentication */}
|
|
{/* <div className="flex flex-row w-full items-start gap-2.5 px-8 py-4 ">
|
|
<Button asChild href="/signup">
|
|
Sign Up
|
|
</Button>
|
|
<Button variant="ghost" asChild href="/login">
|
|
Login
|
|
</Button>
|
|
</div> */}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|