Add mobile menu for admin sidebar navigation

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">