150 lines
4.3 KiB
TypeScript
150 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useCallback } from "react";
|
|
import MobileMenu from "../mobileMenu/MobileMenu";
|
|
import Button from "@/components/button/Button";
|
|
import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
|
|
import Logo from "../Logo";
|
|
import { Plus } from "lucide-react";
|
|
import { NavbarProps } from "@/types/navigation";
|
|
import { useScrollState } from "./useScrollState";
|
|
import { cls } from "@/lib/utils";
|
|
import { getButtonProps } from "@/lib/buttonUtils";
|
|
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
import type { ButtonConfig } from "@/types/button";
|
|
|
|
const SCROLL_THRESHOLD = 50;
|
|
|
|
interface NavbarStyleAppleProps extends NavbarProps {
|
|
button?: ButtonConfig;
|
|
buttonClassName?: string;
|
|
buttonTextClassName?: string;
|
|
}
|
|
|
|
const NavbarStyleApple = ({
|
|
navItems,
|
|
// logoSrc,
|
|
// logoAlt = "",
|
|
brandName = "Webild",
|
|
logoOnClick,
|
|
logoHref,
|
|
button,
|
|
buttonClassName = "",
|
|
buttonTextClassName = "",
|
|
}: NavbarStyleAppleProps) => {
|
|
const isScrolled = useScrollState(SCROLL_THRESHOLD);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const theme = useTheme();
|
|
|
|
const handleMenuToggle = useCallback(() => {
|
|
setMenuOpen((prev) => !prev);
|
|
}, []);
|
|
|
|
const handleMobileNavClick = useCallback(() => {
|
|
setMenuOpen(false);
|
|
}, []);
|
|
|
|
return (
|
|
<nav
|
|
className={cls(
|
|
"fixed z-[1000] top-0 left-0 w-full transition-all duration-500 ease-in-out",
|
|
isScrolled
|
|
? "bg-background/80 backdrop-blur-sm h-15"
|
|
: "bg-background/0 backdrop-blur-0 h-20"
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between h-full w-content-width mx-auto">
|
|
<div className="flex items-center transition-all duration-500 ease-in-out">
|
|
<Logo brandName={brandName} onClick={logoOnClick} href={logoHref} />
|
|
</div>
|
|
|
|
<div
|
|
className="hidden md:flex items-center gap-6 transition-all duration-500 ease-in-out"
|
|
role="navigation"
|
|
>
|
|
{navItems.map((item, index) => (
|
|
<ButtonTextUnderline
|
|
key={index}
|
|
text={item.name}
|
|
href={item.id}
|
|
className="!text-base"
|
|
/>
|
|
))}
|
|
<ButtonTextUnderline
|
|
key="about"
|
|
text="About"
|
|
href="#about"
|
|
className="!text-base"
|
|
/>
|
|
<ButtonTextUnderline
|
|
key="contact"
|
|
text="Get in touch today"
|
|
href="#contact"
|
|
className="!text-base"
|
|
/>
|
|
<div className="text-sm text-red-500">Limited Time Offer</div>
|
|
{button && (
|
|
<Button
|
|
{...getButtonProps(
|
|
button,
|
|
0,
|
|
theme.defaultButtonVariant,
|
|
buttonClassName,
|
|
buttonTextClassName
|
|
)}
|
|
>
|
|
Get in touch today - Limited Time Offer!
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
className="flex md:hidden shrink-0 h-8 aspect-square rounded-theme bg-foreground items-center justify-center cursor-pointer"
|
|
onClick={handleMenuToggle}
|
|
aria-label="Toggle menu"
|
|
aria-expanded={menuOpen}
|
|
aria-controls="mobile-menu"
|
|
>
|
|
<Plus
|
|
className={cls(
|
|
"w-1/2 h-1/2 text-background transition-transform duration-300",
|
|
menuOpen ? "rotate-45" : "rotate-0"
|
|
)}
|
|
strokeWidth={1.5}
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<MobileMenu
|
|
menuOpen={menuOpen}
|
|
onMenuToggle={handleMenuToggle}
|
|
navItems={[...navItems, { name: "About", id: "#about" }]}
|
|
onNavClick={handleMobileNavClick}
|
|
>
|
|
{button && (
|
|
<Button
|
|
{...getButtonProps(
|
|
{
|
|
...button,
|
|
onClick: () => {
|
|
button.onClick?.();
|
|
setMenuOpen(false);
|
|
},
|
|
},
|
|
0,
|
|
theme.defaultButtonVariant,
|
|
cls("w-full", buttonClassName),
|
|
buttonTextClassName
|
|
)}
|
|
>
|
|
Get in touch today - Limited Time Offer!
|
|
</Button>
|
|
)}
|
|
</MobileMenu>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavbarStyleApple;
|