layout.tsx

function MobileMenu({
  content,
  name,
  loginState,
  type,
  image,
}: Readonly<{
  content: React.ReactNode;
  name: string;
  loginState: boolean;
  type: string;
  image: string;
}>) {

  if(loginState){
    return (
      <div className="w-full h-screen overflow-hidden bg-light">
        <div className="w-full h-full">
          <div className="md-menu-container">
            <div className="md-menu-close-icon flex items-center"><div className="ml-8 h-10 w-10 rounded-full flex justify-center items-center"><X size={24} strokeWidth={1.75}/></div></div>
            <div className="md-menu-profile-img flex items-center"><div className="bg-light-3 ml-8 size-20 rounded-lg overflow-hidden relative">
            <Image
              src={image}
              fill={true}
              alt="Profile Picture"
            />
            </div></div>
            <div className="md-menu-profile-header"><div className="ml-8 h-16 w-auto">
              <h1 className="text-xl">{name}</h1>
              <h1 className="text-xl font-bold">{type}</h1>
            </div></div>
            <div className="md-menu-links flex flex-col">
              <div className="ml-8 grow h-fit w-auto flex display-center items-center text-xl"><Home strokeWidth={1.75} /><Link className="ml-2" href="/"><h1 className="font-medium">Home</h1></Link></div>
              <div className="ml-8 grow h-fit w-auto flex display-center items-center text-xl"><CircleFadingPlus strokeWidth={1.75} /><Link className="ml-2" href="#"><h1 className="font-medium">Bookings</h1></Link></div>
              <div className="ml-8 grow h-fit w-auto flex display-center items-center text-xl"><Activity strokeWidth={1.75} /><Link className="ml-2" href="#"><h1 className="font-medium">Athletics</h1></Link></div>
              <div className="ml-8 grow h-fit w-auto flex display-center items-center text-xl"><Clock strokeWidth={1.75} /><Link className="ml-2" href="#"><h1 className="font-medium">Hours</h1></Link></div>
              <div className="ml-8 grow h-fit w-auto flex display-center items-center text-xl"><Mails strokeWidth={1.75} /><Link className="ml-2" href="#"><h1 className="font-medium">News</h1></Link></div>
              <div className="ml-8 grow h-fit w-auto flex display-center items-center text-xl"><Users strokeWidth={1.75} /><Link className="ml-2" href="#"><h1 className="font-medium">Members</h1></Link></div>
              <div className="ml-8 grow h-fit w-auto flex display-center items-center text-xl"><Scale strokeWidth={1.75} /><Link className="ml-2" href="#"><h1 className="font-medium">Bylaws</h1></Link></div>
            </div>
          </div>
        </div>
        <div className="bg-light-2 fixed w-full h-screen top-0 left-0 overflow-x-hidden overflow-y-scroll md-menu md-menu-open">{content}</div>
      </div>
    );