everydayserieswebsite/components/Navbar/navbar.tsx

"use client";

import React, { useState, useRef, useEffect } from "react";
import { FaAngleDown } from "react-icons/fa";
import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from "./dropdowns";
import MobileMenu from "./MobileMenu"; // Import the MobileMenu component

const Navbar: React.FC = () => {
  const [showProduct, setShowProduct] = useState<boolean>(false);
  const [showSolutions, setShowSolutions] = useState<boolean>(false);
  const [showResources, setShowResources] = useState<boolean>(false);
  const [activeTab, setActiveTab] = useState<string | null>(null);
  const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);

  const navbarRef = useRef<HTMLDivElement>(null); // Reference for the navbar

  const toggleDropdown = (tab: string) => {
    if (activeTab === tab) {
      setActiveTab(null);
      setShowProduct(false);
      setShowSolutions(false);
      setShowResources(false);
    } else {
      setActiveTab(tab);
      setShowProduct(tab === "product");
      setShowSolutions(tab === "solutions");
      setShowResources(tab === "resources");
    }
  };

  const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen);
  };

  // Close dropdowns when clicking outside the navbar
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (navbarRef.current && !navbarRef.current.contains(event.target as Node)) {
        setActiveTab(null);
        setShowProduct(false);
        setShowSolutions(false);
        setShowResources(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div ref={navbarRef} className="fixed top-0 w-full h-fit px-10 bg-[#080E12] bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-100 z-50">
      <div className="w-full text-white flex items-center justify-between">
        <div className="flex items-center space-x-12 relative">
          <a href="/">
            <img
              className="h-20"
              src="https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png"
              alt="Logo"
            />
          </a>

          {/* Desktop Menu */}
          <ul className="hidden md:flex space-x-12">
            {/* Product Menu */}
            <li
              className={`flex items-center cursor-pointer relative ${activeTab === "product" ? "text-violet-500" : "text-white"}`}
              onClick={() => toggleDropdown("product")}
            >
              Product <FaAngleDown className="ml-2" />
              {activeTab === "product" && (
                <span className="absolute left-0 -bottom-1 transition-all duration-300">
                  <span className="block h-[2px] w-full bg-violet-500"></span>
                </span>
              )}
            </li>

            {/* Solutions Menu */}
            <li
              className={`flex items-center cursor-pointer relative ${activeTab === "solutions" ? "text-violet-500" : "text-white"}`}
              onClick={() => toggleDropdown("solutions")}
            >
              Solutions <FaAngleDown className="ml-2" />
              {activeTab === "solutions" && (
                <span className="absolute left-0 -bottom-1 transition-all duration-300">
                  <span className="block h-[2px] w-full bg-violet-500"></span>
                </span>
              )}
            </li>

            {/* Pricing */}
            <a href="/pricing">
              <li className="flex items-center cursor-pointer text-white">Pricing</li>
            </a>

            {/* Resources Menu */}
            <li
              className={`flex items-center cursor-pointer relative ${activeTab === "resources" ? "text-violet-500" : "text-white"}`}
              onClick={() => toggleDropdown("resources")}
            >
              Resources <FaAngleDown className="ml-2" />
              {activeTab === "resources" && (
                <span className="absolute left-0 -bottom-1 transition-all duration-300">
                  <span className="block h-[2px] w-full bg-violet-500"></span>
                </span>
              )}
            </li>

            <a href="/ai-agents">
              <li className="flex items-center cursor-pointer text-white">AI Agents</li>
            </a>
          </ul>

          {/* Hamburger Icon for Mobile View */}
          <div className="md:hidden flex items-center" onClick={toggleMobileMenu}>
            ☰
          </div>
        </div>

        {/* Action Buttons */}
        <div className="hidden md:flex space-x-4">
          <button className="border px-4 py-2 rounded-md text-white border-white hover:bg-gray-800">Start Free Trial</button>

          <button className="border px-4 py-2 rounded-md bg-violet-700 hover:bg-violet-500 text-white">Take a Demo</button>
        </div>
      </div>

      {/* Dropdowns for Desktop View */}
      <div className="border">
        {showProduct && (
          <div>
            <ProductDropdown />
          </div>
        )}
        {showSolutions && (
          <div>
            <SolutionsDropdown />
          </div>
        )}
        {showResources && (
          <div>
            <ResourcesDropdown />
          </div>
        )}
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && <MobileMenu show={mobileMenuOpen} toggle={toggleMobileMenu} />}
    </div>
  );
};

export default Navbar;