Initial commit

2026-01-01 14:13:08 +02:00
commit b3704fefc1
308 changed files with 62617 additions and 0 deletions
--- a/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx
+++ b/src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Logo from "../Logo";
+import HamburgerButton from "../HamburgerButton";
+import { NavItem } from "@/types/navigation";
+import { cls } from "@/lib/utils";
+import { useButtonClick } from "@/components/button/useButtonClick";
+import "./NavbarStyleFullscreen.css";
+
+interface NavLinkProps {
+  item: NavItem;
+  onClose: () => void;
+}
+
+const NavLink = ({ item, onClose }: NavLinkProps) => {
+  const handleClick = useButtonClick(item.id, onClose);
+
+  return (
+    <button
+      type="button"
+      className="navbar-fullscreen__link text-background font-normal leading-[1.15] no-underline text-9xl bg-transparent border-none cursor-pointer"
+      onClick={handleClick}
+    >
+      <span className="navbar-fullscreen__link-text block relative">{item.name}</span>
+    </button>
+  );
+};
+
+interface NavbarStyleFullscreenProps {
+  navItems: NavItem[];
+  // logoSrc?: string;
+  // logoAlt?: string;
+  brandName?: string;
+  bottomLeftText?: string;
+  bottomRightText?: string;
+  className?: string;
+  topBarClassName?: string;
+}
+
+const NavbarStyleFullscreen = ({
+  navItems,
+  // logoSrc,
+  // logoAlt = "",
+  brandName = "Webild",
+  bottomLeftText = "Global Community",
+  bottomRightText = "hello@example.com",
+  className = "",
+  topBarClassName = "",
+}: NavbarStyleFullscreenProps) => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleToggle = useCallback(() => {
+    setIsActive((prev) => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsActive(false);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isActive) {
+        setIsActive(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive]);
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Main navigation"
+      data-navigation-status={isActive ? "active" : "not-active"}
+      className={cls("fixed inset-0 z-[100] pointer-events-none", className)}
+    >
+      <div className={cls(
+        "absolute z-1 w-content-width left-1/2 -translate-x-1/2 top-6 flex justify-between items-center",
+        topBarClassName
+      )}>
+        <Logo
+          brandName={brandName}
+          textClassName={`transition-colors duration-700 ease-[cubic-bezier(0.5,0.5,0,1)] ${isActive ? "text-background" : "text-foreground"}`}
+        />
+        <HamburgerButton isActive={isActive} onClick={handleToggle} />
+      </div>
+
+      <div
+        id="navigation-menu"
+        className="navbar-fullscreen__tile pointer-events-auto bg-foreground absolute inset-0 flex flex-col justify-center items-center"
+      >
+        <ul className="navbar-fullscreen__ul flex flex-col items-center m-0 p-0 list-none">
+          {navItems.map((item) => (
+            <li key={item.id} className="navbar-fullscreen__li flex justify-center items-center m-0 p-0 relative overflow-hidden">
+              <NavLink item={item} onClose={handleClose} />
+            </li>
+          ))}
+        </ul>
+
+        <div className="absolute bottom-0 w-content-width left-1/2 -translate-x-1/2 flex justify-between items-center py-10">
+          <p className="text-background/50 mb-0 text-base relative">{bottomLeftText}</p>
+          <p className="text-background/50 mb-0 text-base relative">{bottomRightText}</p>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+NavbarStyleFullscreen.displayName = "NavbarStyleFullscreen";
+
+export default NavbarStyleFullscreen;