Fix mobile nav: hamburger left, brand right, polished menu panel

src/components/mobile-nav.tsx

@@ -1,26 +1,33 @@
 "use client";
 
 import { type ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
 
 interface MobileNavProps {
 	children: ReactNode;
 	menuLabel?: string;
 	closeLabel?: string;
+	brandLabel?: string;
 }
 
 export function MobileNav({
 	children,
 	menuLabel = "Open menu",
 	closeLabel = "Close menu",
+	brandLabel = "Atom",
 }: MobileNavProps) {
 	return (
-		<details className="relative md:hidden ml-auto">
+		<details className="group relative md:hidden">
 			<summary
-				className="list-none cursor-pointer flex items-center justify-center w-10 h-10 rounded-lg shrink-0 [&::-webkit-details-marker]:hidden"
+				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
+					hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
+					active:scale-[0.96]"
 				aria-label={"Menu"}
 			>
 				<svg
-					className="w-5 h-5 details-open:hidden"
+					className="w-6 h-6 details-open:hidden"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
@@ -28,12 +35,12 @@ export function MobileNav({
 					strokeLinecap="round"
 					strokeLinejoin="round"
 				>
-					<line x1="3" y1="6" x2="21" y2="6" />
+					<line x1="4" y1="7" x2="20" y2="7" />
-					<line x1="3" y1="12" x2="21" y2="12" />
+					<line x1="4" y1="12" x2="20" y2="12" />
-					<line x1="3" y1="18" x2="21" y2="18" />
+					<line x1="4" y1="17" x2="20" y2="17" />
 				</svg>
 				<svg
-					className="w-5 h-5 hidden details-open:block"
+					className="w-6 h-6 hidden details-open:block"
 					viewBox="0 0 24 24"
 					fill="none"
 					stroke="currentColor"
@@ -47,17 +54,47 @@ export function MobileNav({
 			</summary>
 
 			<div
-				className="absolute right-0 top-full mt-1 w-[280px] sm:w-[320px] z-50 overflow-y-auto max-h-[70vh]"
+				className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
-				style={{ backgroundColor: "var(--color-navbar)" }}
+				style={{ backgroundColor: "transparent" }}
 			>
 				<div
-					className="flex flex-col gap-y-0.5 p-2 rounded-xl border shadow-lg mx-2 mb-2"
+					className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
+						bg-[var(--color-dropdown,var(--color-surface,#fff))]"
 					style={{
-						backgroundColor: "var(--color-dropdown, var(--color-navbar))",
 						borderColor:
-							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						boxShadow:
+							"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
 					}}
 				>
+					<div
+						className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
+						style={{
+							backgroundColor:
+								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+						}}
+					>
+						<Image
+							src="/assets/images/icons/navigation/home.png"
+							alt=""
+							width={22}
+							height={22}
+							className="shrink-0"
+						/>
+						<span
+							className="text-sm font-extrabold uppercase tracking-wide"
+							style={{
+								color:
+									"var(--color-navbar-text-readable, var(--color-text))",
+							}}
+						>
+							{brandLabel}
+						</span>
+						<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-60">
+							{closeLabel}
+						</span>
+					</div>
+
 					{children}
 				</div>
 			</div>

src/components/navigation.tsx

@@ -18,7 +18,7 @@ export async function Navigation() {
 			className="sticky top-0 z-40"
 			style={{ backgroundColor: "var(--color-navbar)" }}
 		>
-			<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
+			<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-2">
 				<div
 					className="absolute bottom-0 left-0 right-0 h-[3px]"
 					style={{ backgroundColor: "var(--color-primary, #eeb425)" }}
@@ -310,6 +310,29 @@ export async function Navigation() {
 					</div>
 				</MobileNav>
 
+				{/* Mobile: brand (right) */}
+				<Link
+					href="/"
+					className="ml-auto flex md:hidden items-center gap-2 shrink-0"
+					aria-label="Home"
+				>
+					<Image
+						src="/assets/images/icons/navigation/home.png"
+						alt=""
+						width={26}
+						height={26}
+					/>
+					<span
+						className="text-base font-extrabold uppercase tracking-wide"
+						style={{
+							color:
+								"var(--color-navbar-text-readable, var(--color-navbar-text))",
+						}}
+					>
+						Atom
+					</span>
+				</Link>
+
 				{/* Desktop: controls */}
 				<div className="ml-auto hidden md:flex items-center gap-x-1">
 					<LanguageSwitcher />