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';

const Navbar = () => {

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

    useEffect(() => {
        const handleScroll = () => {
            // Find pixels from top to bottom of "tag line" div
            if (window.scrollY > 355) {
                setIsScrolled(true);
            } else {
                setIsScrolled(false);
            }
        };

        window.addEventListener('scroll', handleScroll);

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

  return (
    <nav className="sticky top-0 left-0 z-50 hidden lg:flex justify-center">
        <div className={classnames(
                    "w-11/12 bg-britton-neutral p-1 text-britton-dark rounded-b-3xl", {
                        "min-h-5 border-1 border-britton-dark" : isScrolled,
                        "min-h-20" : !isScrolled
                    }
                )}
        >
            <div className="container mx-auto justify-between items-center flex">
                <div className={classnames('rounded-3xl bg-britton-dark', {"hidden" : isScrolled})}>
                    <Image
                        src="/images/bbstpa-forsite.png"
                        alt="Britton Logo"
                        width={273}
                        height={80}
                    />
                </div>
                {/* <div className={classnames(`bg-[url(/images/bbstpa-forsite.png)]`, {"hidden" : isScrolled})} /> */}
                {/* <Image src="/images/bbstpa-forsite.png" alt="Britton Logo" className={classnames({"hidden" : isScrolled})}/> */}
                {/* <div className={classnames("text-xl font-bold", {"hidden" : isScrolled})}>
                    Britton <br />
                    &nbsp;&nbsp;&nbsp;Benefit <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Services
                </div> */}
                <ul className="flex space-x-4 font-semibold text-lg uppercase">
                    <li>
                        <Link href="/services" className="hover:text-britton-light">
                            Employers
                        </Link>
                    </li>
                    <li>
                        <Link href="/contact" className="hover:text-britton-light">
                            Members
                        </Link>
                    </li>
                    <li>
                        <Link href="/contact" className="hover:text-britton-light">
                            Providers
                        </Link>
                    </li>
                    <li>
                        <Link href="/contact" className="hover:text-britton-light">
                            Brokers
                        </Link>
                    </li>
                    <li>
                        <Link href="/contact" className="hover:text-britton-light">
                            Contact Us
                        </Link>
                    </li>
                </ul>
                <div className="flex space-x-2 font-semibold">
                    <Button className="bg-britton-neutral hover:bg-britton-accent2 py-1 px-4 rounded border-1 border-britton-dark">
                        Sign In
                    </Button>
                    <Button className="bg-britton-dark hover:bg-britton-medium text-britton-light py-1 px-4 rounded">
                        Get a Quote
                    </Button>
                </div>
            </div>
        </div>
    </nav>
  );
};

export default Navbar;