infoalloggi-monorepo/apps/infoalloggi/src/components/navbar/mobile-nav.tsx

import { AlignLeft, Home } from "lucide-react";
import Link, { type LinkProps } from "next/link";
import { useRouter } from "next/navigation";
import type { ReactNode } from "react";
import { IconMatrix } from "~/components/IconComponents";
import { LangToggle } from "~/components/navbar/lang-toggle";
import { UserHeaderSection } from "~/components/navbar/login-button";
import { ASvg, LogoSvg } from "~/components/svgs";
import { Button } from "~/components/ui/button";
import { Separator } from "~/components/ui/separator";
import {
	Sheet,
	SheetContent,
	SheetDescription,
	SheetHeader,
	SheetTitle,
	SheetTrigger,
} from "~/components/ui/sheet";
import { useMediaQuery } from "~/hooks/use-media-query";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import { useSession } from "~/providers/SessionProvider";

type MobileNavProps = {
	pathname: string;
	open: boolean;
	setOpen: (status: boolean) => void;
	userOpen: boolean;
	setUserOpen: (status: boolean) => void;
};

export function MobileNav({
	pathname,
	open,
	setOpen,
	userOpen,
	setUserOpen,
}: MobileNavProps) {
	const session = useSession();
	const { t } = useTranslation();
	const verySmallScreen = useMediaQuery("(max-width: 320px)");
	return (
		<>
			<Sheet open={open} onOpenChange={setOpen}>
				<SheetTrigger asChild>
					<Button
						aria-label="Toggle Mobile Menu"
						variant="ghost"
						className="mr-2 size-8 p-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden [&_svg]:size-6"
					>
						<AlignLeft />

						<span className="sr-only">Toggle Menu</span>
					</Button>
				</SheetTrigger>
				<SheetContent side="left" className="z-500 p-0">
					<SheetHeader>
						<SheetTitle className="sr-only">Mobile Menu</SheetTitle>
						<SheetDescription className="sr-only">
							This is the mobile menu
						</SheetDescription>
					</SheetHeader>
					<div className="flex h-full flex-col space-y-2 overflow-y-auto px-3 pb-4">
						<MobileLink
							href="/"
							aria-label="mainNavLinkHome"
							className="ml-2 flex items-center gap-3"
							onOpenChange={setOpen}
						>
							<Home className="size-6" />{" "}
							<span className="text-xl font-medium">Home</span>
						</MobileLink>

						<div className="flex h-full flex-col space-y-2 pt-4">
							{pathname.startsWith("/area-riservata") && (
								<>
									{session?.user && (
										<AreaRiservataLinks
											isAdmin={session.user.isAdmin}
											pathname={pathname}
											setOpen={setOpen}
										/>
									)}
									<Separator />
								</>
							)}

							<div className="text-primary flex h-full grow flex-col gap-3">
								{t.nav.mainNav.map((item) => (
									<MobileLink
										key={item.href}
										href={item.href}
										onOpenChange={setOpen}
										className={cn(
											"flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
											item.href === pathname && "bg-muted",
										)}
									>
										<IconMatrix
											key={item.title}
											type={item.icon}
											className="size-5"
										/>{" "}
										{item.title}
									</MobileLink>
								))}
								<Separator />
							</div>

							<div className="flex h-fit flex-col gap-4 pb-2">
								<UserHeaderSection
									open={userOpen}
									setOpen={setUserOpen}
									setSidebar={setOpen}
									inSidebar
								/>

								<div className="flex items-center justify-center gap-6">
									<LangToggle />
									{/* <ThemeSwitch /> */}
								</div>
							</div>
						</div>
					</div>
				</SheetContent>
			</Sheet>
			<Link
				href="/"
				className="ml-3 flex shrink-0 items-center md:hidden"
				aria-label="mainNavLink"
			>
				{verySmallScreen ? (
					<ASvg className="h-8 w-auto" />
				) : (
					<LogoSvg className="xs:h-8 [&>text]:fill-primary [&>text]:stroke-primary h-6 w-auto text-neutral-700 sm:h-10 [&>g]:fill-red-500 dark:[&>g]:fill-neutral-100 dark:[&>text]:fill-neutral-100 dark:[&>text]:stroke-neutral-100" />
				)}
			</Link>
		</>
	);
}

interface MobileLinkProps extends LinkProps {
	onOpenChange?: (open: boolean) => void;
	children: ReactNode;
	className?: string;
	disabled?: boolean;
}

function MobileLink({
	href,
	onOpenChange,
	className,
	children,
	disabled,
	...props
}: MobileLinkProps) {
	const router = useRouter();
	return (
		<Link
			aria-label="mobileLink"
			href={href}
			onClick={(e) => {
				if (disabled) {
					e.preventDefault();
					e.stopPropagation();
					onOpenChange?.(false);
				} else {
					router.push(
						href.toString(),
					);
					onOpenChange?.(false);
				}
			}}
			className={cn(className)}
			{...props}
		>
			{children}
		</Link>
	);
}

type AreaRiservataLinksProps = {
	isAdmin: boolean;
	setOpen?: (status: boolean) => void;
	pathname: string;
};
const AreaRiservataLinks = ({
	isAdmin,
	setOpen,
	pathname,
}: AreaRiservataLinksProps) => {
	const { t } = useTranslation();
	return (
		<div className="text-primary flex flex-col space-y-4 text-base">
			{isAdmin
				? t.nav.areaRiservataAdminNav.map((item) => {
						if (item.items !== undefined) {
							return (
								<div key={item.title}>
									<div
										className={cn(
											"flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
											item.href === pathname && "bg-muted",
										)}
									>
										<IconMatrix type={item.icon} className="size-5" />

										{item.title}
									</div>
									<div>
										<ul>
											{item.items.map((item) => {
												return (
													<MobileLink
														key={item.title}
														href={item.href}
														onOpenChange={setOpen}
														className={cn(
															`hover:text-accent-foreground mx-4 block w-full border-l px-6 py-2 duration-150 hover:border-neutral-800`,
															item.href === pathname &&
																"border-neutral-900 text-neutral-900",
														)}
													>
														{item.title}
													</MobileLink>
												);
											})}
										</ul>
									</div>
								</div>
							);
						}
						return (
							<MobileLink
								key={item.title}
								href={item.href}
								onOpenChange={setOpen}
								className={cn(
									"flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
									item.href === pathname && "bg-muted",
								)}
							>
								<IconMatrix type={item.icon} className="size-5" />
								{item.title}
							</MobileLink>
						);
					})
				: t.nav.areaRiservataUserNav.map((item) => (
						<MobileLink
							key={item.title}
							href={item.href}
							onOpenChange={setOpen}
							className={cn(
								"flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
								item.href === pathname && "bg-muted",
							)}
						>
							<IconMatrix type={item.icon} className="size-5" />
							{item.title}
						</MobileLink>
					))}
		</div>
	);
};

export const ARMinimizableLinks = ({
	isAdmin,
	setOpen,
	pathname,
	minimized,
}: {
	isAdmin: boolean;
	setOpen?: (status: boolean) => void;
	pathname: string;
	minimized: boolean;
}) => {
	const { t } = useTranslation();
	return (
		<div
			className={cn(
				"text-primary flex w-full flex-col space-y-4 text-base",
				minimized && "justify-center",
			)}
		>
			{isAdmin
				? t.nav.areaRiservataAdminNav.map((item) => {
						if (item.items !== undefined) {
							return (
								<div key={item.title}>
									<div
										className={cn(
											"flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
											item.href === pathname && "bg-muted",
											minimized && "justify-center",
										)}
									>
										<IconMatrix type={item.icon} className="size-5" />

										{!minimized && item.title}
									</div>
									<div>
										<ul className="truncate">
											{item.items.map((item) => {
												return (
													<MobileLink
														key={item.title}
														href={item.href}
														onOpenChange={setOpen}
														className={cn(
															`hover:text-accent-foreground mx-4 block w-full border-l px-6 py-2 duration-150 hover:border-neutral-800`,
															item.href === pathname &&
																"border-neutral-900 text-neutral-900",
															minimized && "hidden",
														)}
														disabled={minimized}
													>
														{item.title}
													</MobileLink>
												);
											})}
										</ul>
									</div>
								</div>
							);
						}
						return (
							<MobileLink
								key={item.title}
								href={item.href}
								onOpenChange={setOpen}
								className={cn(
									"flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
									item.href === pathname && "bg-muted",
									minimized && "justify-center",
								)}
								disabled={minimized}
							>
								<IconMatrix type={item.icon} className="size-5" />
								{!minimized && item.title}
							</MobileLink>
						);
					})
				: t.nav.areaRiservataUserNav.map((item) => (
						<MobileLink
							key={item.title}
							href={item.href}
							onOpenChange={setOpen}
							className={cn(
								"flex items-center gap-3 rounded-lg px-2 py-1 font-medium",
								item.href === pathname && "bg-muted",
								minimized && "justify-center",
							)}
							disabled={minimized}
						>
							<IconMatrix type={item.icon} className="size-5" />
							{!minimized && item.title}
						</MobileLink>
					))}
		</div>
	);
};