Implement responsive sidebar with drawer functionality and navigation menu toggle

Author: amide-init

src/components/admin/AdminLayout.tsx

@@ -1,3 +1,4 @@
+import { useState, useCallback } from 'react'
 import { Outlet } from 'react-router-dom'
 import { AdminNavbar } from './AdminNavbar'
 import { AdminSidebar } from './AdminSidebar'
@@ -8,11 +9,16 @@ type AdminLayoutProps = {
 }
 
 export function AdminLayout({ repoName, onLogout }: AdminLayoutProps) {
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  const openDrawer = useCallback(() => setDrawerOpen(true), [])
+  const closeDrawer = useCallback(() => setDrawerOpen(false), [])
+
   return (
     <div className="flex min-h-screen flex-col bg-slate-950 text-slate-50">
-      <AdminNavbar repoName={repoName} onLogout={onLogout} />
+      <AdminNavbar repoName={repoName} onLogout={onLogout} onMenuOpen={openDrawer} />
       <div className="flex flex-1">
-        <AdminSidebar />
+        <AdminSidebar drawerOpen={drawerOpen} onClose={closeDrawer} />
         <main className="flex-1 overflow-auto">
           <div className="mx-auto max-w-4xl p-6">
             <Outlet />

src/components/admin/AdminNavbar.tsx

@@ -3,12 +3,23 @@ import { Link } from 'react-router-dom'
 type AdminNavbarProps = {
   repoName: string | null
   onLogout: () => void
+  onMenuOpen: () => void
 }
 
-export function AdminNavbar({ repoName, onLogout }: AdminNavbarProps) {
+export function AdminNavbar({ repoName, onLogout, onMenuOpen }: AdminNavbarProps) {
   return (
     <nav className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-slate-800 bg-slate-950/95 px-6 backdrop-blur">
-      <div className="flex items-center gap-6">
+      <div className="flex items-center gap-3">
+        <button
+          type="button"
+          onClick={onMenuOpen}
+          className="flex h-8 w-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-800 hover:text-slate-200 md:hidden"
+          aria-label="Open navigation menu"
+        >
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
         <Link
           to="/admin"
           className="flex items-center gap-2 text-base font-semibold tracking-tight text-slate-50"
@@ -19,7 +30,7 @@ export function AdminNavbar({ repoName, onLogout }: AdminNavbarProps) {
           Portfolio Admin
         </Link>
         {repoName && (
-          <span className="hidden text-xs text-slate-500 sm:inline">
+          <span className="hidden text-xs text-slate-500 md:inline">
             {repoName}
           </span>
         )}

src/components/admin/AdminSidebar.tsx

@@ -1,4 +1,5 @@
-import { NavLink } from 'react-router-dom'
+import { useEffect } from 'react'
+import { NavLink, useLocation } from 'react-router-dom'
 
 const SIDEBAR_ITEMS = [
   {
@@ -58,9 +59,9 @@ const SETTINGS_ITEMS = [
   },
 ] as const
 
-export function AdminSidebar() {
+function NavItems({ onNavigate }: { onNavigate?: () => void }) {
   return (
-    <aside className="flex w-56 shrink-0 flex-col border-r border-slate-800 bg-slate-950/80">
+    <>
       <div className="flex flex-col gap-0.5 p-3">
         <p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-wider text-slate-500">
           Content
@@ -70,6 +71,7 @@ export function AdminSidebar() {
             key={to}
             to={to}
             end={end}
+            onClick={onNavigate}
             className={({ isActive }) =>
               `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${
                 isActive
@@ -92,6 +94,7 @@ export function AdminSidebar() {
             key={to}
             to={to}
             end={end}
+            onClick={onNavigate}
             className={({ isActive }) =>
               `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition ${
                 isActive
@@ -105,6 +108,75 @@ export function AdminSidebar() {
           </NavLink>
         ))}
       </div>
-    </aside>
+    </>
+  )
+}
+
+type AdminSidebarProps = {
+  drawerOpen: boolean
+  onClose: () => void
+}
+
+export function AdminSidebar({ drawerOpen, onClose }: AdminSidebarProps) {
+  const location = useLocation()
+
+  // Close drawer on route change
+  useEffect(() => {
+    onClose()
+  }, [location.pathname, onClose])
+
+  // Lock body scroll when drawer is open
+  useEffect(() => {
+    if (drawerOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [drawerOpen])
+
+  return (
+    <>
+      {/* Desktop sidebar — always visible on md+ */}
+      <aside className="hidden w-56 shrink-0 flex-col border-r border-slate-800 bg-slate-950/80 md:flex">
+        <NavItems />
+      </aside>
+
+      {/* Mobile drawer */}
+      {/* Backdrop */}
+      <div
+        className={`fixed inset-0 z-40 bg-black/60 transition-opacity duration-300 md:hidden ${
+          drawerOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      {/* Drawer panel */}
+      <aside
+        className={`fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-slate-800 bg-slate-950 transition-transform duration-300 ease-in-out md:hidden ${
+          drawerOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+        aria-label="Navigation drawer"
+      >
+        <div className="flex h-14 shrink-0 items-center justify-between border-b border-slate-800 px-4">
+          <span className="text-sm font-semibold text-slate-200">Menu</span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex h-8 w-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-800 hover:text-slate-200"
+            aria-label="Close navigation menu"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          <NavItems />
+        </div>
+      </aside>
+    </>
   )
 }