Rebuild mobile nav: absolute positioned dropdown panel, outside doc flow

src/components/mobile-nav.tsx

@@ -14,7 +14,7 @@ export function MobileNav({
 	closeLabel = "Close menu",
 }: MobileNavProps) {
 	const [open, setOpen] = useState(false);
-	const panelRef = useRef<HTMLDivElement>(null);
+	const ref = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		if (!open) return;
@@ -25,12 +25,23 @@ export function MobileNav({
 		return () => document.removeEventListener("keydown", onKey);
 	}, [open]);
 
+	useEffect(() => {
+		if (!open) return;
+		const onClick = (e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				setOpen(false);
+			}
+		};
+		document.addEventListener("mousedown", onClick);
+		return () => document.removeEventListener("mousedown", onClick);
+	}, [open]);
+
 	return (
-		<>
+		<div ref={ref} className="relative flex md:hidden">
 			<button
 				type="button"
 				onClick={() => setOpen((v) => !v)}
-				className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg ml-auto shrink-0"
+				className="flex items-center justify-center w-10 h-10 rounded-lg ml-auto shrink-0"
 				style={{
 					color: "var(--color-navbar-text-readable, var(--color-navbar-text))",
 				}}
@@ -64,30 +75,30 @@ export function MobileNav({
 
 			{open && (
 				<div
-					className="fixed inset-0 z-30 md:hidden"
+					className="fixed inset-0 z-30"
 					onClick={() => setOpen(false)}
 					style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
 				/>
 			)}
 
-			<div
+			{open && (
-				id="mobile-menu"
-				ref={panelRef}
-				role="menu"
-				className={`${open ? "block" : "hidden"} md:block w-full md:w-auto`}
-				style={{ backgroundColor: "var(--color-navbar)" }}
-			>
 				<div
-					className="flex flex-col md:flex-row md:items-center gap-y-0.5 p-2 md:p-0 rounded-xl md:rounded-none border md:border-0 shadow-lg md:shadow-none mt-1 md:mt-0"
+					id="mobile-menu"
-					style={{
+					role="menu"
-						borderColor:
+					className="absolute right-0 top-full mt-1 w-screen max-w-[360px] z-40 overflow-y-auto max-h-[70vh]"
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					style={{ backgroundColor: "var(--color-navbar)" }}
-					}}
-					onClick={() => setOpen(false)}
 				>
-					{children}
+					<div
+						className="flex flex-col gap-y-0.5 p-2 rounded-xl border shadow-lg mx-2 mb-2"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+						}}
+					>
+						{children}
+					</div>
 				</div>
-			</div>
+			)}
-		</>
+		</div>
 	);
 }

src/components/navigation.tsx

@@ -41,7 +41,7 @@ export async function Navigation() {
 					menuLabel={t("openMenu") || "Open menu"}
 					closeLabel={t("closeMenu") || "Close menu"}
 				>
-					<Link href="/" className="nav-item md:hidden" role="menuitem">
+					<Link href="/" className="nav-item" role="menuitem">
 						<Image
 							src="/assets/images/icons/navigation/me.png"
 							alt=""
@@ -173,7 +173,7 @@ export async function Navigation() {
 					) : null}
 
 					<div
-						className="flex items-center gap-x-1 pt-2 mt-2 border-t md:hidden"
+						className="flex items-center gap-x-1 pt-2 mt-2 border-t"
 						style={{
 							borderColor:
 								"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
@@ -185,7 +185,7 @@ export async function Navigation() {
 					</div>
 				</MobileNav>
 
-				<div className="ml-auto flex items-center gap-x-1 hidden md:flex">
+				<div className="ml-auto hidden md:flex items-center gap-x-1">
 					<LanguageSwitcher />
 					<NavbarColorPicker />
 					<ThemeSwitcher />