assessment-model/src/app/components/Navbar.tsx

"use client";

import React, { useState } from "react";
import { Transition } from "@headlessui/react";
import ProfileDropDown from "./ProfileDropDown";
import { signOut } from "next-auth/react";
import { usePathname } from "next/navigation";
import Image from "next/image";

function makeLink(href: string, label: string) {
  return (
    <a
      href={href}
      className="text-gray-300 hover:bg-hoverblue hover:text-white px-3 py-2 rounded-md text-sm font-medium"
    >
      {label}
    </a>
  );
}

function Nav({ userImage }: { userImage: string }) {
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();

  if (pathname === "/") {
    return null;
  }
  return (
    <div>
      <nav className="bg-brandblue" data-testid="app-navbar">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center">
              <div className="flex-shrink-0">
                <Image
                  src="/domna_logo_white_text.png"
                  alt="Workflow"
                  width={140}
                  height={40}
                />
              </div>
              <div className="hidden md:block">
                <div className="ml-10 flex items-baseline space-x-4">
                  {makeLink("/home", "Home")}
                  {/* {makeLink("/due-considerations", "Due Considerations")} */}
                  {/* {makeLink("/eco-spreadsheet", "Eco Spreadsheet")} */}
                  {makeLink("/help", "Help")}
                  <div className="flex-grow"></div>
                </div>
              </div>
            </div>
            <div className="flex-grow"></div>
            <ProfileDropDown userImage={userImage} />
            <div className="-mr-2 flex md:hidden">
              <button
                onClick={() => setIsOpen(!isOpen)}
                type="button"
                className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
                aria-controls="mobile-menu"
                aria-expanded="false"
              >
                <span className="sr-only">Open main menu</span>
                {!isOpen ? (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                ) : (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                )}
              </button>
            </div>
          </div>
        </div>
        <Transition
          show={isOpen}
          enter="transition ease-out duration-100 transform"
          enterFrom="opacity-0 scale-95"
          enterTo="opacity-100 scale-100"
          leave="transition ease-in duration-75 transform"
          leaveFrom="opacity-100 scale-100"
          leaveTo="opacity-0 scale-95"
        >
          {(ref) => (
            <div className="md:hidden" id="mobile-menu">
              <div ref={ref as React.MutableRefObject<HTMLDivElement | null>} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a
                  href="/home"
                  className="hover:bg-hoverblue text-white block px-3 py-2 rounded-md text-base font-medium"
                >
                  Home
                </a>

                <a
                  href="/help"
                  className="text-gray-300 hover:bg-hoverblue hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                >
                  Help
                </a>

                <a
                  href="/"
                  className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
                  onClick={() => {
                    signOut();
                  }}
                >
                  Log Out
                </a>
              </div>
            </div>
          )}
        </Transition>
      </nav>
    </div>
  );
}

export default Nav;