From 5f479402a0853a3e46c7088bd06dda02bec1d6c7 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 7 May 2026 13:13:18 -0400
Subject: [PATCH] Add mobile menu for admin sidebar navigation

---
 src/AdminPage.tsx | 17 ++++++++++++++-
 src/App.css       | 55 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/AdminPage.tsx b/src/AdminPage.tsx
index b1589ba..03c4f9a 100644
--- a/src/AdminPage.tsx
+++ b/src/AdminPage.tsx
@@ -324,6 +324,7 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
   const [questionSearch, setQuestionSearch] = useState('')
   const [questionFilter, setQuestionFilter] = useState<'all' | 'pending' | 'approved' | 'answered' | 'unanswered'>('all')
   const [questionPage, setQuestionPage] = useState(0)
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
   const [manualQuestion, setManualQuestion] = useState({
     firstName: '',
     email: '',
@@ -1038,6 +1039,7 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
     if (view === adminView) return
     if (!confirmLeaveUnsavedChanges()) return
     setAdminView(view)
+    setMobileNavOpen(false)
   }
 
   function addLink() {
@@ -1599,6 +1601,15 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
           <span className="admin-topbar-sub">Verse by Verse with Nate</span>
         </div>
         <div className="admin-topbar-actions">
+          <button
+            type="button"
+            className={`admin-mobile-menu-btn${mobileNavOpen ? ' admin-mobile-menu-btn--open' : ''}`}
+            onClick={() => setMobileNavOpen(open => !open)}
+            aria-expanded={mobileNavOpen}
+            aria-controls="admin-sidebar-nav"
+          >
+            {mobileNavOpen ? 'Close Menu' : 'Menu'}
+          </button>
           {isDirty && <span className="admin-status admin-status--warn">● Unsaved</span>}
           <span className="admin-topbar-meta">Draft: {formatDate(publishState.draftUpdatedAt)}</span>
           <span className="admin-topbar-meta">Published: {formatDate(publishState.publishedAt)}</span>
@@ -1614,13 +1625,14 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
 
       <div className={`admin-layout${previewOpen ? ' admin-layout--split' : ''}`}>
         {/* ── Sidebar ── */}
-        <nav className="admin-sidebar" aria-label="Admin navigation">
+        <nav id="admin-sidebar-nav" className={`admin-sidebar${mobileNavOpen ? ' admin-sidebar--open' : ''}`} aria-label="Admin navigation">
           <div className="admin-sidebar-meta-links">
             <Link
               to="/"
               className="admin-meta-link"
               onClick={e => {
                 if (!confirmLeaveUnsavedChanges()) e.preventDefault()
+                else setMobileNavOpen(false)
               }}
             >
               ← Back to site
@@ -1630,6 +1642,7 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
               className="admin-meta-link"
               onClick={() => {
                 if (!confirmLeaveUnsavedChanges()) return
+                setMobileNavOpen(false)
                 void onLogout()
               }}
             >
@@ -1677,6 +1690,8 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
           </div>
         </nav>
 
+        {mobileNavOpen && <button type="button" className="admin-sidebar-backdrop" aria-label="Close navigation menu" onClick={() => setMobileNavOpen(false)} />}
+
         {/* ── Content panel ── */}
         <main className="admin-panel">
 
diff --git a/src/App.css b/src/App.css
index 7febf65..6110378 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3725,6 +3725,27 @@
     color: rgba(240,234,216,0.45);
   }
 
+  .admin-mobile-menu-btn {
+    display: none;
+    background: transparent;
+    color: var(--brand-gold);
+    border: 1px solid rgba(201,168,76,0.35);
+    border-radius: 999px;
+    padding: 0.45rem 0.9rem;
+    font-family: var(--brand-font-body);
+    font-size: 0.8rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  .admin-mobile-menu-btn--open {
+    background: rgba(201,168,76,0.15);
+    border-color: rgba(201,168,76,0.6);
+    color: var(--brand-warm-white);
+  }
+
   .admin-layout {
     display: flex;
     flex: 1;
@@ -3841,6 +3862,10 @@
     margin: 0;
   }
 
+  .admin-sidebar-backdrop {
+    display: none;
+  }
+
   .admin-panel-subhead {
     margin: 2rem 0 1rem;
     padding-bottom: 0.4rem;
@@ -4121,9 +4146,39 @@
 }
 
   @media (max-width: 768px) {
+    .admin-mobile-menu-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     .admin-sidebar {
       display: none;
+      position: fixed;
+      top: 52px;
+      left: 0;
+      z-index: 130;
+      width: min(320px, 84vw);
+      min-width: 0;
+      height: calc(100vh - 52px);
+      border-right: 1px solid rgba(201,168,76,0.22);
+      box-shadow: 16px 0 40px rgba(0, 0, 0, 0.5);
     }
+
+    .admin-sidebar--open {
+      display: block;
+    }
+
+    .admin-sidebar-backdrop {
+      display: block;
+      position: fixed;
+      inset: 52px 0 0 0;
+      z-index: 120;
+      border: none;
+      background: rgba(0, 0, 0, 0.48);
+      cursor: pointer;
+    }
+
     .admin-panel {
       padding: 1.25rem 1rem;
     }