Close mobile nav menu when a link inside is tapped

src/components/mobile-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode } from "react";
+import { type ReactNode, useRef } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -17,8 +17,20 @@ export function MobileNav({
 	closeLabel = "Close menu",
 	brandLabel = "Atom",
 }: MobileNavProps) {
+	const detailsRef = useRef<HTMLDetailsElement>(null);
+
+	const handleClick = (e: React.MouseEvent) => {
+		if ((e.target as HTMLElement).closest("a") && detailsRef.current) {
+			detailsRef.current.open = false;
+		}
+	};
+
 	return (
-		<details className="group relative md:hidden">
+		<details
+			ref={detailsRef}
+			onClick={handleClick}
+			className="group relative md:hidden"
+		>
 			<summary
 				className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
 					[&::-webkit-details-marker]:hidden transition-colors duration-150