Use compact mobile section menu for competition nav

Author: coder13

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}