portfolio/app/components/Header.tsx

"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

export default function Header() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 50); // Delay to start the animation after Projects
  }, []);

  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    } else {
      /*go to main page and scroll*/
      window.location.href = `/#${id}`;
    }
  };

  return (
    <div className={`p-4 ${isVisible ? "animate-fly-in" : "opacity-0"}`}>
      <div
        className={`fixed top-4 left-4 right-4 p-4 bg-white/45 text-gray-700 backdrop-blur-md shadow-xl rounded-2xl z-50 ${isSidebarOpen ? "transform -translate-y-full" : ""}`}
      >
        <header className="w-full">
          <nav className="flex flex-row items-center px-4">
            <Link href="/" className="flex justify-start">
              <h1 className="text-xl md:text-2xl">Dennis Konkol</h1>
            </Link>
            <div className="flex-grow"></div>
            <button
              className="text-gray-700 hover:text-gray-900 md:hidden"
              onClick={toggleSidebar}
              aria-label={"Open menu"}
            >
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
            </button>
            <div className="hidden md:flex space-x-4 md:space-x-6">
              <button
                onClick={() => scrollToSection("about")}
                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
              >
                About
              </button>
              <button
                onClick={() => scrollToSection("projects")}
                className="relative px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
              >
                Projects
              </button>
              <button
                onClick={() => scrollToSection("contact")}
                className="relative pl-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
              >
                Contact
              </button>
            </div>
          </nav>
        </header>
      </div>

      <div
        className={`fixed inset-0 bg-black bg-opacity-50 transition-opacity ${isSidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`}
        onClick={toggleSidebar}
      ></div>

      <div
        className={`fixed z-10 top-0 right-0 h-full bg-white w-1/3 transform transition-transform flex flex-col ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`}
      >
        <button
          aria-label={"Close menu"}
          className="absolute top-4 right-4 text-gray-700 hover:text-gray-900"
          onClick={toggleSidebar}
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
        <div className="pt-8 space-y-4 flex-grow">
          <button
            onClick={() => scrollToSection("about")}
            className="w-full px-4 py-2 pt-8 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
          >
            About
          </button>
          <button
            onClick={() => scrollToSection("projects")}
            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
          >
            Projects
          </button>
          <button
            onClick={() => scrollToSection("contact")}
            className="w-full px-4 py-2 text-gray-700 hover:text-gray-900 text-xl md:text-2xl group"
          >
            Contact
          </button>
        </div>
        <p className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</p>
      </div>
    </div>
  );
}