feat: enhance UserViewHeader with responsive utility and navigation buttons

apps/infoalloggi/src/components/area-riservata/userViewHeader.tsx

@@ -1,7 +1,9 @@
 import { format } from "date-fns";
 import {
+	ChevronDown,
 	CloudSync,
 	ExternalLink,
+	type LucideIcon,
 	Mail,
 	MessagesSquare,
 	NotebookPen,
@@ -26,7 +28,10 @@ import {
 	DialogTrigger,
 } from "~/components/ui/dialog";
 import { Textarea } from "~/components/ui/textarea";
+import { useMediaQuery } from "~/hooks/use-media-query";
 import { useUserViewContext } from "~/lib/userViewContext";
+import { cn } from "~/lib/utils";
+
 import { api } from "~/utils/api";
 import { Confirm } from "../confirm";
 import { WhatsAppIcon2 } from "../svgs";
@@ -55,12 +60,87 @@ export const UserViewHeader = () => {
 			});
 		},
 	});
+	const isDesktop = useMediaQuery("(min-width:  640px)");
+
+	const links: { label: string; slug: string; icon: LucideIcon }[] = [
+		{
+			label: "Profilo",
+			slug: "edit-user",
+			icon: UserCog,
+		},
+		{
+			label: "Ricerca",
+			slug: "ricerca",
+			icon: Search,
+		},
+		{
+			label: "Comunicazioni",
+			slug: "comunicazioni",
+			icon: Mail,
+		},
+		{
+			label: "Ordini",
+			slug: "ordini",
+			icon: ShoppingBag,
+		},
+		{
+			label: "Allegati",
+			slug: "allegati",
+			icon: Paperclip,
+		},
+	];
+	useEffect(() => {
+		setUtilOpen(isDesktop);
+		setNavOpen(isDesktop);
+	}, [isDesktop]);
+	const [utilOpen, setUtilOpen] = useState(isDesktop);
+	const [navOpen, setNavOpen] = useState(isDesktop);
+
 	if (!data) return <div>Errore</div>;
 	return (
-		<div className="mb-5 flex flex-col space-y-5">
+		<div className="mb-5 flex flex-col gap-y-3">
-			<div className="flex flex-row flex-wrap items-center gap-3">
 			<div className="text-3xl">{data.username}</div>
 
+			<div className="grid grid-cols-2 items-center gap-2 sm:hidden">
+				<Button
+					className="w-full"
+					onClick={() => {
+						if (utilOpen) {
+							setUtilOpen(false);
+							return;
+						}
+						if (navOpen) {
+							setNavOpen(false);
+						}
+						setUtilOpen(true);
+					}}
+					size="sm"
+					variant="outline"
+				>
+					Utilità
+					<ChevronDown className={cn(utilOpen && "rotate-180")} />
+				</Button>
+				<Button
+					className="w-full"
+					onClick={() => {
+						if (navOpen) {
+							setNavOpen(false);
+							return;
+						}
+						if (utilOpen) {
+							setUtilOpen(false);
+						}
+						setNavOpen(true);
+					}}
+					size="sm"
+					variant="outline"
+				>
+					Navigazione <ChevronDown className={cn(navOpen && "rotate-180")} />
+				</Button>
+			</div>
+
+			{utilOpen && (
+				<div className="flex flex-row flex-wrap gap-2">
 					<Link href={`https://wa.me/${data.telefono}`} target="_blank">
 						<Button size="sm" variant="success">
 							<WhatsAppIcon2 className="size-4 fill-white" />
@@ -88,55 +168,23 @@ export const UserViewHeader = () => {
 					<NoteUtenteDialog />
 					<OverseerButton />
 				</div>
-			<div className="flex flex-row flex-wrap gap-2">
+			)}
-				<Link href={`/area-riservata/admin/user-view/edit-user/${data.id}`}>
-					<Button
-						className="border"
-						size="sm"
-						variant={pathname.includes("edit-user") ? "secondary" : "outline"}
-					>
-						<UserCog /> Profilo
-					</Button>
-				</Link>
-				<Link href={`/area-riservata/admin/user-view/ricerca/${data.id}`}>
-					<Button
-						className="border"
-						size="sm"
-						variant={pathname.includes("ricerca") ? "secondary" : "outline"}
-					>
-						<Search /> Ricerca
-					</Button>
-				</Link>
-				<Link href={`/area-riservata/admin/user-view/comunicazioni/${data.id}`}>
-					<Button
-						className="border"
-						size="sm"
-						variant={
-							pathname.includes("comunicazioni") ? "secondary" : "outline"
-						}
-					>
-						<Mail /> Comunicazioni
-					</Button>
-				</Link>
 
-				<Link href={`/area-riservata/admin/user-view/ordini/${data.id}`}>
+			{navOpen && (
-					<Button
+				<div className="flex flex-row flex-wrap gap-2">
-						className="border"
+					{links.map((link) => (
-						size="sm"
+						<Link
-						variant={pathname.includes("ordini") ? "secondary" : "outline"}
+							href={`/area-riservata/admin/user-view/${link.slug}/${data.id}`}
+							key={link.slug}
 						>
-						<ShoppingBag /> Ordini
+							<Button
-					</Button>
+								size="sm"
-				</Link>
+								variant={pathname.includes(link.slug) ? "secondary" : "outline"}
-				<Link href={`/area-riservata/admin/user-view/allegati/${data.id}`}>
+							>
-					<Button
+								{<link.icon />} {link.label}
-						className="border"
-						size="sm"
-						variant={pathname.includes("allegati") ? "secondary" : "outline"}
-					>
-						<Paperclip /> Allegati
 							</Button>
 						</Link>
+					))}
 
 					<Link
 						href={
@@ -149,17 +197,12 @@ export const UserViewHeader = () => {
 						}
 						target="_blank"
 					>
-					<Button
+						<Button size="sm" variant={!data.chatid ? "ghost" : "outline"}>
-						className="border"
-						size="sm"
-						variant={!data.chatid ? "ghost" : "outline"}
-					>
 							<MessagesSquare /> Chat
 						</Button>
 					</Link>
 
 					<Button
-					className="flex gap-2"
 						onClick={() =>
 							swap({
 								id: data.id,
@@ -170,6 +213,8 @@ export const UserViewHeader = () => {
 						<ExternalLink /> Login
 					</Button>
 				</div>
+			)}
+
 			<Separator />
 		</div>
 	);