next-web/src/components/Navbar.tsx

"use client";

import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import Link from 'next/link';
import Button from './Button';
import Image from 'next/image';

export interface MenuItem {
  id: string;
  title: string;
  route?: string;
  children?: MenuItem[];
}

// const menuItems: MenuItem[] = [
//   {
//     id: "members",
//     title: "Members",
//     children: [
//       {
//         id: "findMedicalProvider",
//         title: "Find a Medical Provider",
//         route: "",
//       },
//       {
//         id: "obtainRxInformation",
//         title: "Obtain Rx Information",
//         route: "",
//       },
//     ],
//   },
//   {
//     id: "employers",
//     title: "Employers",
//     children: [
//       {
//         id: "employerServices",
//         title: "Employer Services",
//         route: "",
//       },
//       {
//         id: "selfFundedPlans",
//         title: "Self-Funded Plans",
//         route: "",
//       },
//       {
//         id: "controlHealthCareCosts",
//         title: "Control Health Care Costs",
//         route: "",
//       },
//     ],
//   },
//   {
//     id: "providers",
//     title: "Providers",
//     children: [
//       {
//         id: "eligibilityLookup",
//         title: "Eligibility Lookup",
//         route: "",
//       },
//       {
//         id: "contactBbs",
//         title: "Contact BBS",
//         route: "",
//       },
//     ],
//   },
//   {
//     id: "brokers",
//     title: "Brokers",
//     route: "",
//     },
// ];

const Navbar = () => {

    const [isScrolled, setIsScrolled] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            const subtractedHeight = window.innerHeight - 80;
            if (window.scrollY > subtractedHeight) {
                setIsScrolled(true);
            } else {
                setIsScrolled(false);
            }
        };

        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

  return (
    <nav className="fixed top-0 left-0 z-10 hidden md:flex w-full h-[85px] justify-center bg-transparent">
        <div className={classnames(
                    "w-11/12 bg-platinum px-1 text-deepcove rounded-b-3xl", {
                        "h-13 pb-1 border-b-2 border-x-2 border-black" : isScrolled,
                        "h-full pb-4" : !isScrolled
                    }
                )}
        >
            <div className="w-full px-3 justify-between items-center flex">
                <div className={classnames('rounded-b-2xl bg-deepcove w-72', {"hidden" : isScrolled})}>
                    <Image
                        src="/images/bbstpa-forsite.png"
                        alt="Britton Logo"
                        width={205}
                        height={60}
                    />
                </div>
                <div className={classnames('rounded-b-2xl py-2 mb-1 bg-deepcove font-semibold text-platinum text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
                    <Link href="/">
                        Britton Benefit Services
                    </Link>
                </div>
                <ul className={classnames("flex space-x-4 font-semibold text-xl", {"pl-2" : isScrolled})}>
                    <li>
                        <Link href="/members" className="hover:text-bluemana">
                            Members
                        </Link>
                    </li>
                    <li>
                        <Link href="/employers" className="hover:text-bluemana">
                            Employers
                        </Link>
                    </li>
                    <li>
                        <Link href="/" className="hover:text-bluemana">
                            Providers
                        </Link>
                    </li>
                    <li>
                        <Link href="/" className="hover:text-bluemana">
                            Brokers
                        </Link>
                    </li>
                    <li>
                        <Link href="/" className="hover:text-bluemana">
                            Services
                        </Link>
                    </li>
                </ul>
                {/* <div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}>
                    {menuItems.map((item) => {
                    return item.hasOwnProperty("children") ? 
                    (
                        <Dropdown item={item} />
                    ) : (
                        <Link className="hover:text-bluemana" href={item?.route || ""}>
                            {item.title}
                        </Link>
                    );
                    })}
                </div> */}
                <div className={classnames("flex space-x-2 font-semibold", {"pt-1" : isScrolled})}>
                    <Link href="/dashboard/member" passHref>
                        <button className="bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
                            Sign In
                        </button>
                    </Link>
                    {/* <Button href="" className="bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
                        Sign In
                    </Button> */}
                    <Button className="bg-deepcove hover:bg-bluetang text-bluemana py-1 px-4 rounded">
                        Get a Quote
                    </Button>
                </div>
            </div>
        </div>
    </nav>
  );
};

export default Navbar;