encoach_landingpage/src/components/Navbar.tsx

"use client";

import Link from "next/link";
import Image from "next/image";
import clsx from "clsx";
import {BsList, BsXLg} from "react-icons/bs";
import {Fragment, useState} from "react";
import {Dialog, Menu, Transition} from "@headlessui/react";

export default function Navbar({currentPage}: {currentPage: string}) {
	const [isOpen, setIsOpen] = useState(false);

	return (
		<>
			<header className="w-full px-11 py-3 md:flex justify-between items-center -md:hidden shadow-sm">
				<Link href="/">
					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
				</Link>
				<div className="flex gap-8 items-center w-fit">
					<Link
						href="/"
						className={clsx(
							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
							currentPage === "/" && "",
						)}>
						Home
					</Link>
					<Link
						href="/services"
						className={clsx(
							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
							currentPage === "/services" && "",
						)}>
						Services
					</Link>
					<Link
						href="/about"
						className={clsx(
							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
							currentPage === "/about" && "",
						)}>
						About us
					</Link>
					<Link
						href="/history"
						className={clsx(
							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
							currentPage === "/history" && "",
						)}>
						History
					</Link>
					<Link
						href="/contact"
						className={clsx(
							"hover:border-b-2 hover:border-b-mti-purple-light transition ease-in-out duration-300",
							currentPage === "/contact" && "",
						)}>
						Contact
					</Link>
				</div>
				<div className="flex items-center w-fit gap-4">
					<Link
						href="https://encoach.com"
						className="transition ease-in-out duration-300 hover:text-white hover:bg-mti-purple-dark border border-mti-purple-dark px-8 py-2 rounded-xl">
						Platform
					</Link>
					<Link
						href="/join"
						className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl">
						Join
					</Link>
				</div>
			</header>

			<Transition appear show={isOpen} as={Fragment}>
				<Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
					<Transition.Child
						as={Fragment}
						enter="ease-out duration-300"
						enterFrom="opacity-0"
						enterTo="opacity-100"
						leave="ease-in duration-200"
						leaveFrom="opacity-100"
						leaveTo="opacity-0">
						<div className="fixed inset-0 bg-black bg-opacity-25" />
					</Transition.Child>

					<div className="fixed inset-0 overflow-y-auto">
						<div className="flex min-h-full items-center justify-center text-center">
							<Transition.Child
								as={Fragment}
								enter="ease-out duration-300"
								enterFrom="opacity-0 scale-95"
								enterTo="opacity-100 scale-100"
								leave="ease-in duration-200"
								leaveFrom="opacity-100 scale-100"
								leaveTo="opacity-0 scale-95">
								<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
									<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
										<Link href="/">
											<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
										</Link>
										<div className="cursor-pointer" onClick={() => setIsOpen(false)} tabIndex={0}>
											<BsXLg className="text-2xl text-mti-purple-light" onClick={() => setIsOpen(false)} />
										</div>
									</Dialog.Title>
									<div className="flex flex-col gap-6 px-8 text-lg">
										<Link
											href="/"
											className={clsx(
												"transition ease-in-out duration-300 w-fit",
												currentPage === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
											)}>
											Home
										</Link>
										<Link
											href="/services"
											className={clsx(
												"transition ease-in-out duration-300 w-fit",
												currentPage === "/services" &&
													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
											)}>
											Services
										</Link>
										<Link
											href="/about"
											className={clsx(
												"transition ease-in-out duration-300 w-fit",
												currentPage === "/about" &&
													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
											)}>
											About us
										</Link>
										<Link
											href="/history"
											className={clsx(
												"transition ease-in-out duration-300 w-fit",
												currentPage === "/history" &&
													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
											)}>
											History
										</Link>
										<Link
											href="/contact"
											className={clsx(
												"transition ease-in-out duration-300 w-fit",
												currentPage === "/contact" &&
													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
											)}>
											Contact
										</Link>
										<Link
											href="/join"
											className={clsx(
												"transition ease-in-out duration-300 w-fit",
												currentPage === "/join" &&
													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
											)}>
											Join
										</Link>
										<Link href="https://encoach.com" className={clsx("transition ease-in-out duration-300 w-fit")}>
											Platform
										</Link>
									</div>
								</Dialog.Panel>
							</Transition.Child>
						</div>
					</div>
				</Dialog>
			</Transition>

			<header className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden">
				<Link href="/">
					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
				</Link>
				<div className="cursor-pointer" onClick={() => setIsOpen(true)}>
					<BsList className="text-2xl" onClick={() => setIsOpen(true)} />
				</div>
			</header>
		</>
	);
}