pollo/src/components/Navbar.tsx

import { signIn, signOut, useSession } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { env } from "~/env.mjs";

interface NavbarProps {
  title: string;
}

const Navbar: React.FC<NavbarProps> = ({ title }) => {
  const { data: sessionData, status: sessionStatus } = useSession();
  const router = useRouter();

  const navigationMenu = () => {
    if (sessionStatus === "authenticated" && router.pathname !== "/dashboard") {
      return (
        <Link className="btn btn-secondary btn-outline mx-2" href="/dashboard">
          Dashboard
        </Link>
      );
    } else if (sessionStatus === "unauthenticated") {
      return (
        <button className="btn btn-secondary" onClick={() => void signIn()}>
          Sign In
        </button>
      );
    }
  };

  return (
    <nav className="navbar bg-base-100 h-12">
      <div className="flex-1">
        <Link
          about="Back to home."
          href="/"
          className="btn btn-ghost normal-case text-xl"
        >
          <Image
            className="md:mr-2"
            src="/logo.webp"
            alt="Nav Logo"
            width={32}
            height={32}
            priority
          />
          <span className="hidden md:inline-flex">
            {title}
            {env.NEXT_PUBLIC_APP_ENV === "development" && " >> Staging"}
          </span>
        </Link>
      </div>

      {sessionStatus === "loading" ? (
        <div className="flex items-center justify-center">
          <span className="loading loading-dots loading-lg"></span>
        </div>
      ) : (
        navigationMenu()
      )}

      {sessionData?.user.image && (
        <div className="flex-none gap-2">
          <div className="dropdown dropdown-end">
            <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
              <div className="w-10 rounded-full">
                <Image
                  src={sessionData.user.image}
                  alt="Profile picture."
                  height={32}
                  width={32}
                />
              </div>
            </label>
            <ul
              tabIndex={0}
              className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box z-50"
            >
              <li>
                <Link
                  about="Profile Page"
                  href="/profile"
                  className="justify-between"
                >
                  Profile
                </Link>
              </li>
              {sessionData.user.role === "ADMIN" && (
                <li>
                  <Link
                    about="Admin Page"
                    href="/admin"
                    className="justify-between"
                  >
                    Admin
                  </Link>
                </li>
              )}
              <button
                className="btn btn-secondary btn-sm text-center whitespace-nowrap"
                onClick={() => void signOut({ callbackUrl: "/" })}
              >
                Sign Out
              </button>
            </ul>
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;