Initial commit

src/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+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;
+  className?: string;
+  brandName?: string;
+  button: ButtonConfig;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  logoOnClick?: () => void;
+  logoHref?: string;
+}
+
+const NavbarLayoutFloatingOverlay = ({
+  navItems,
+  // logoSrc,
+  // logoAlt = "",
+  className = "",
+  brandName = "Webild",
+  button,
+  buttonClassName = "",
+  buttonTextClassName = "",
+  logoOnClick,
+  logoHref,
+}: NavbarLayoutFloatingOverlayProps) => {
+    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="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",
+            className
+          )}
+          style={{
+            height: "calc(var(--vw-0_75) + var(--vw-0_75) + var(--height-9))",
+          }}
+        >
+          <Logo brandName={brandName} onClick={logoOnClick} href={logoHref} />
+          <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;

src/components/navbar/NavbarLayoutFloatingOverlay/useMenuAnimation.ts

@@ -0,0 +1,40 @@
+import { useState, useCallback, useEffect } from 'react';
+
+export const useMenuAnimation = () => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [buttonZIndex, setButtonZIndex] = useState('z-[100]');
+    const [animationTimeoutId, setAnimationTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+    const handleMenuToggle = useCallback(() => {
+        const isOpening = !menuOpen;
+        setMenuOpen(prev => !prev);
+
+        if (animationTimeoutId) {
+            clearTimeout(animationTimeoutId);
+        }
+
+        if (isOpening) {
+            setButtonZIndex('z-0');
+        } else {
+            const timeoutId = setTimeout(() => {
+                setButtonZIndex('z-[100]');
+            }, 800);
+            setAnimationTimeoutId(timeoutId);
+        }
+    }, [menuOpen, animationTimeoutId]);
+
+    useEffect(() => {
+        return () => {
+            if (animationTimeoutId) {
+                clearTimeout(animationTimeoutId);
+            }
+        };
+    }, [animationTimeoutId]);
+
+    return {
+        menuOpen,
+        buttonZIndex,
+        handleMenuToggle,
+        setMenuOpen
+    };
+};

src/components/navbar/NavbarLayoutFloatingOverlay/useResponsive.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import { throttle } from '@/utils/throttle';
+
+export const useResponsive = (breakpoint: number = 768) => {
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const handleResize = throttle(() => {
+            setIsMobile(window.innerWidth < breakpoint);
+        }, 150);
+        
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [breakpoint]);
+
+    return isMobile;
+};

src/components/navbar/NavbarLayoutFloatingOverlay/useScrollDetection.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import { throttle } from '@/utils/throttle';
+
+export const useScrollDetection = (threshold: number = 50) => {
+    const [isScrolled, setIsScrolled] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = throttle(() => {
+            setIsScrolled(window.scrollY > threshold);
+        }, 100);
+        
+        handleScroll();
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [threshold]);
+
+    return isScrolled;
+};