From 1bbda77392e16d644901d3a75f4164ef43bee78d Mon Sep 17 00:00:00 2001
From: Cailyn Sinclair <choover11@gmail.com>
Date: Mon, 11 May 2026 22:00:39 -0700
Subject: [PATCH 1/2] Use compact mobile section menu for competition nav

---
 .../CompetitionLayout/CompetitionLayout.tsx   | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/layouts/CompetitionLayout/CompetitionLayout.tsx b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
index cd496bb..6356879 100644
--- a/src/layouts/CompetitionLayout/CompetitionLayout.tsx
+++ b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Outlet, useLocation, useParams } from 'react-router-dom';
 import { BarLoader } from 'react-spinners';
@@ -17,6 +17,7 @@ export function CompetitionLayout() {
   const { pathname } = useLocation();
 
   const ref = useRef<HTMLDivElement>(null);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   const { data: wcif, dataUpdatedAt, isFetching } = useWcif(competitionId!);
 
@@ -25,14 +26,45 @@ export function CompetitionLayout() {
     wcif: wcif,
   });
 
+  const currentTab = useMemo(
+    () =>
+      tabs.find((tab) => pathname === tab.href) ||
+      tabs.find((tab) => pathname.startsWith(tab.href)),
+    [tabs, pathname],
+  );
+
   useEffect(() => {
     ref.current?.scrollTo(0, 0);
+    setIsMobileMenuOpen(false);
   }, [pathname]);
 
   const Header = (
     <nav className="z-10 flex justify-center w-full shadow-md shadow-tertiary-dark print:hidden bg-panel">
       <Container className="justify-between md:flex-row">
-        <div className="flex">
+        <div className="flex w-full flex-col space-y-2 p-2 md:hidden">
+          <button
+            aria-expanded={isMobileMenuOpen}
+            className="flex w-full items-center justify-between rounded-md border border-tertiary-weak bg-panel px-2 py-2"
+            onClick={() => {
+              setIsMobileMenuOpen((prev) => !prev);
+            }}
+            type="button">
+            <span className="type-meta text-muted">Section</span>
+            <span className="type-body text-primary">
+              {currentTab?.text || tabs[0]?.text || 'Menu'}
+            </span>
+          </button>
+          {isMobileMenuOpen && (
+            <div className="grid grid-cols-2 gap-2">
+              {tabs
+                .filter((tab) => !tab.hiddenOnMobile)
+                .map((i) => (
+                  <StyledNavLink key={i.href} className="type-body-sm" to={i.href} text={i.text} />
+                ))}
+            </div>
+          )}
+        </div>
+        <div className="hidden w-full p-2 md:flex">
           {tabs.map((i) => (
             <StyledNavLink
               key={i.href}

From 09fdb0830ce675c0f83c8d68e555d3fb7133c08b Mon Sep 17 00:00:00 2001
From: Cailyn Sinclair <choover11@gmail.com>
Date: Mon, 11 May 2026 22:08:10 -0700
Subject: [PATCH 2/2] Implement top mobile tabs with overflow sheet

---
 .../CompetitionLayout/CompetitionLayout.tsx   | 86 ++++++++++++++-----
 1 file changed, 64 insertions(+), 22 deletions(-)

diff --git a/src/layouts/CompetitionLayout/CompetitionLayout.tsx b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
index 6356879..be154e1 100644
--- a/src/layouts/CompetitionLayout/CompetitionLayout.tsx
+++ b/src/layouts/CompetitionLayout/CompetitionLayout.tsx
@@ -25,12 +25,27 @@ export function CompetitionLayout() {
     competitionId: competitionId!,
     wcif: wcif,
   });
+  const mobileTabs = useMemo(() => tabs.filter((tab) => !tab.hiddenOnMobile), [tabs]);
 
   const currentTab = useMemo(
     () =>
-      tabs.find((tab) => pathname === tab.href) ||
-      tabs.find((tab) => pathname.startsWith(tab.href)),
-    [tabs, pathname],
+      mobileTabs.find((tab) => pathname === tab.href) ||
+      mobileTabs.find((tab) => pathname.startsWith(tab.href)),
+    [mobileTabs, pathname],
+  );
+  const primaryMobileTabs = useMemo(() => {
+    const primary = mobileTabs.slice(0, 4);
+    if (currentTab && !primary.some((tab) => tab.href === currentTab.href)) {
+      return [...primary.slice(0, 3), currentTab];
+    }
+    return primary;
+  }, [mobileTabs, currentTab]);
+  const overflowMobileTabs = useMemo(
+    () =>
+      mobileTabs.filter(
+        (tab) => !primaryMobileTabs.some((primaryTab) => primaryTab.href === tab.href),
+      ),
+    [mobileTabs, primaryMobileTabs],
   );
 
   useEffect(() => {
@@ -42,25 +57,52 @@ export function CompetitionLayout() {
     <nav className="z-10 flex justify-center w-full shadow-md shadow-tertiary-dark print:hidden bg-panel">
       <Container className="justify-between md:flex-row">
         <div className="flex w-full flex-col space-y-2 p-2 md:hidden">
-          <button
-            aria-expanded={isMobileMenuOpen}
-            className="flex w-full items-center justify-between rounded-md border border-tertiary-weak bg-panel px-2 py-2"
-            onClick={() => {
-              setIsMobileMenuOpen((prev) => !prev);
-            }}
-            type="button">
-            <span className="type-meta text-muted">Section</span>
-            <span className="type-body text-primary">
-              {currentTab?.text || tabs[0]?.text || 'Menu'}
-            </span>
-          </button>
-          {isMobileMenuOpen && (
-            <div className="grid grid-cols-2 gap-2">
-              {tabs
-                .filter((tab) => !tab.hiddenOnMobile)
-                .map((i) => (
-                  <StyledNavLink key={i.href} className="type-body-sm" to={i.href} text={i.text} />
-                ))}
+          <div className="grid grid-cols-2 gap-2">
+            {primaryMobileTabs.map((i) => (
+              <StyledNavLink key={i.href} className="type-body-sm" to={i.href} text={i.text} />
+            ))}
+          </div>
+          {overflowMobileTabs.length > 0 && (
+            <button
+              aria-expanded={isMobileMenuOpen}
+              className="flex w-full items-center justify-between rounded-md border border-tertiary-weak bg-panel px-2 py-2"
+              onClick={() => {
+                setIsMobileMenuOpen((prev) => !prev);
+              }}
+              type="button">
+              <span className="type-meta text-muted">More sections</span>
+              <span className="type-body-sm text-primary">
+                {currentTab && overflowMobileTabs.some((tab) => tab.href === currentTab.href)
+                  ? currentTab.text
+                  : `${overflowMobileTabs.length} more`}
+              </span>
+            </button>
+          )}
+          {isMobileMenuOpen && overflowMobileTabs.length > 0 && (
+            <div className="fixed inset-0 z-20 bg-black/40 px-2 py-2">
+              <div className="mx-auto mt-auto flex max-w-lg flex-col space-y-2 rounded-t-xl border border-tertiary-weak bg-panel p-2 shadow-xl">
+                <div className="flex items-center justify-between">
+                  <div className="type-body font-semibold">More sections</div>
+                  <button
+                    className="rounded-md border border-tertiary-weak px-2 py-2 type-meta"
+                    onClick={() => {
+                      setIsMobileMenuOpen(false);
+                    }}
+                    type="button">
+                    Close
+                  </button>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  {overflowMobileTabs.map((i) => (
+                    <StyledNavLink
+                      key={i.href}
+                      className="type-body-sm"
+                      to={i.href}
+                      text={i.text}
+                    />
+                  ))}
+                </div>
+              </div>
             </div>
           )}
         </div>