Hide top nav on scroll and small tweaks

app/components/MobileNav.module.css

@@ -16,9 +16,10 @@
 	display: flex;
 	justify-content: space-around;
 	align-items: center;
-	height: 60px;
+	height: var(--layout-nav-height);
 	background-color: var(--color-bg);
 	border-top: 1.5px solid var(--color-border);
+	padding: 0 var(--s-4);
 	padding-bottom: env(safe-area-inset-bottom);
 }
 
@@ -27,17 +28,23 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: var(--s-0-5);
-	padding: var(--s-1) var(--s-2);
-	min-width: 64px;
+	padding: 0;
+	height: 100%;
+	aspect-ratio: 1 / 1;
 	background: none;
 	border: none;
+	border-radius: var(--rounded-sm);
 	color: var(--color-text-high);
 	font-size: var(--fonts-xxxs);
 	font-weight: var(--semi-bold);
 	cursor: pointer;
 	text-decoration: none;
 	transition: color 0.15s;
+
+	&:focus-visible {
+		outline: var(--input-focus-ring);
+		outline-offset: -1px;
+	}
 }
 
 .tab:hover,

app/components/MobileNav.tsx

@@ -242,7 +242,12 @@ function MenuOverlay({
 				<Dialog className={styles.panelDialog}>
 					<header className={styles.menuHeader}>
 						<h2 className={styles.menuTitle}>{t("front:mobileNav.menu")}</h2>
-						<SendouButton icon={<X />} variant="minimal" onPress={onClose} />
+						<SendouButton
+							icon={<X />}
+							variant="minimal"
+							shape="circle"
+							onPress={onClose}
+						/>
 					</header>
 
 					<section className={styles.streamsSection}>

app/components/layout/LogInButtonContainer.tsx

@@ -18,11 +18,7 @@ export function LogInButtonContainer({
 
 	return (
 		<>
-			<form
-				action={LOG_IN_URL}
-				method="post"
-				className="w-full stack items-center"
-			>
+			<form action={LOG_IN_URL} method="post" className="stack items-center">
 				{children}
 			</form>
 			{authError != null &&

app/components/layout/index.module.css

@@ -10,9 +10,7 @@
 	align-items: center;
 	gap: var(--s-3);
 	border-bottom: 1.5px solid var(--color-border);
-	-webkit-backdrop-filter: blur(10px) brightness(95%);
-	backdrop-filter: blur(10px) brightness(95%);
-	background-color: transparent;
+	background-color: var(--color-bg);
 	font-weight: bold;
 	padding-inline: var(--s-4);
 	position: sticky;

app/components/layout/index.tsx

@@ -124,6 +124,50 @@ function useSideNavCollapsed(initialCollapsed: boolean) {
 	return [collapsed, setCollapsedAndPersist] as const;
 }
 
+function useNavOffset() {
+	const [navOffset, setNavOffset] = React.useState(0);
+	const lastScrollY = React.useRef(0);
+
+	const MOBILE_BREAKPOINT = 600;
+	const NAV_HEIGHT = 55;
+
+	React.useEffect(() => {
+		const handleScroll = () => {
+			if (window.innerWidth >= MOBILE_BREAKPOINT) {
+				setNavOffset(0);
+				lastScrollY.current = window.scrollY;
+				return;
+			}
+
+			const currentScrollY = window.scrollY;
+			const scrollDelta = currentScrollY - lastScrollY.current;
+
+			setNavOffset((prevOffset) => {
+				const newOffset = prevOffset - scrollDelta;
+				return Math.max(-NAV_HEIGHT, Math.min(0, newOffset));
+			});
+
+			lastScrollY.current = currentScrollY;
+		};
+
+		const handleResize = () => {
+			if (window.innerWidth >= MOBILE_BREAKPOINT) {
+				setNavOffset(0);
+			}
+		};
+
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		window.addEventListener("resize", handleResize);
+
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+			window.removeEventListener("resize", handleResize);
+		};
+	}, []);
+
+	return navOffset;
+}
+
 export function Layout({
 	children,
 	data,
@@ -135,11 +179,12 @@ export function Layout({
 	const [sideNavCollapsed, setSideNavCollapsed] = useSideNavCollapsed(
 		data?.sidenavCollapsed ?? false,
 	);
-	const location = useLocation();
 
 	const { t } = useTranslation(["front"]);
 	const { formatRelativeDate } = useTimeFormat();
+	const location = useLocation();
 	const sidebarData = useSidebarData();
+	const navOffset = useNavOffset();
 
 	const events = sidebarData?.events ?? [];
 	const matchStatus = sidebarData?.matchStatus;
@@ -153,6 +198,7 @@ export function Layout({
 		import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID &&
 		!data?.user?.roles.includes("MINOR_SUPPORT") &&
 		!location.pathname.includes("plans");
+
 	return (
 		<>
 			<NavDialog isOpen={navDialogOpen} close={() => setNavDialogOpen(false)} />
@@ -260,7 +306,12 @@ export function Layout({
 			</SideNav>
 			<MobileNav sidebarData={sidebarData} />
 			<div className={styles.container}>
-				<header className={styles.header}>
+				<header
+					className={styles.header}
+					style={{
+						transform: `translateY(${navOffset}px)`,
+					}}
+				>
 					<MobileLogo />
 					<SideNavCollapseButton
 						onToggle={() => setSideNavCollapsed(!sideNavCollapsed)}