everydayserieswebsite/components/Navbar/navbar.tsx

"use client";

import React, { useState } 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>('');
  const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false); // State for mobile menu

  const toggleProduct = () => {
    setShowProduct(!showProduct);
    setShowSolutions(false);
    setShowResources(false);
    setActiveTab('product');
  };

  const toggleSolutions = () => {
    setShowSolutions(!showSolutions);
    setShowProduct(false);
    setShowResources(false);
    setActiveTab('solutions');
  };

  const toggleResources = () => {
    setShowResources(!showResources);
    setShowProduct(false);
    setShowSolutions(false);
    setActiveTab('resources');
  };

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

  return (
    <div 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' : ''}`} onClick={toggleProduct}>
              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' : ''}`} onClick={toggleSolutions}>
              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 */}
            <li className='flex items-center cursor-pointer'>Pricing</li>

            {/* Resources Menu */}
            <li className={`flex items-center cursor-pointer relative ${activeTab === 'resources' ? 'text-violet-500' : ''}`} onClick={toggleResources}>
              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>
          </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;