93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
"use client";
|
|
import { memo } from "react";
|
|
import ExpandingMenu from "../expandingMenu/ExpandingMenu";
|
|
import Button from "../../button/Button";
|
|
import Logo from "../Logo";
|
|
import { useScrollDetection } from "./useScrollDetection";
|
|
import { useMenuAnimation } from "./useMenuAnimation";
|
|
import { useResponsive } from "./useResponsive";
|
|
import type { NavItem } from "@/types/navigation";
|
|
import { cls } from "@/lib/utils";
|
|
import { getButtonProps } from "@/lib/buttonUtils";
|
|
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
|
import type { ButtonConfig } from "@/types/button";
|
|
|
|
interface NavbarLayoutFloatingOverlayProps {
|
|
navItems: NavItem[];
|
|
logoSrc?: string;
|
|
logoAlt?: string;
|
|
brandName?: string;
|
|
button: ButtonConfig;
|
|
buttonClassName?: string;
|
|
buttonTextClassName?: string;
|
|
}
|
|
|
|
const NavbarLayoutFloatingOverlay = memo<NavbarLayoutFloatingOverlayProps>(
|
|
function NavbarLayoutFloatingOverlay({
|
|
navItems,
|
|
logoSrc,
|
|
logoAlt = "",
|
|
brandName = "Webild",
|
|
button,
|
|
buttonClassName = "",
|
|
buttonTextClassName = "",
|
|
}) {
|
|
const theme = useTheme();
|
|
const isScrolled = useScrollDetection(50);
|
|
const { menuOpen, buttonZIndex, handleMenuToggle } =
|
|
useMenuAnimation();
|
|
const isMobile = useResponsive(768);
|
|
|
|
return (
|
|
<nav
|
|
role="navigation"
|
|
aria-label="Main navigation"
|
|
className={cls(
|
|
"fixed z-[100] top-6 w-full",
|
|
"transition-all duration-500 ease-in-out"
|
|
)}
|
|
>
|
|
<div
|
|
className={cls(
|
|
"w-content-width mx-auto",
|
|
"flex items-center justify-between",
|
|
"card rounded-theme backdrop-blur-xs",
|
|
"px-6 md:pr-3"
|
|
)}
|
|
style={{
|
|
height: "calc(var(--vw-0_75) + var(--vw-0_75) + var(--height-9))",
|
|
}}
|
|
>
|
|
<Logo logoSrc={logoSrc} logoAlt={logoAlt} brandName={brandName} />
|
|
<div
|
|
className="flex items-center transition-all duration-500 ease-in-out"
|
|
style={{ paddingRight: "calc(var(--height-9) + var(--vw-0_75))" }}
|
|
>
|
|
{!isMobile && (
|
|
<div className="hidden md:flex">
|
|
<Button
|
|
{...getButtonProps(
|
|
button,
|
|
0,
|
|
theme.defaultButtonVariant,
|
|
cls(buttonZIndex, buttonClassName),
|
|
buttonTextClassName
|
|
)}
|
|
/>
|
|
</div>
|
|
)}
|
|
<ExpandingMenu
|
|
isOpen={menuOpen}
|
|
onToggle={handleMenuToggle}
|
|
navItems={navItems}
|
|
isScrolled={isScrolled}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default NavbarLayoutFloatingOverlay;
|