create for series

components/ui/MobileMenu.tsx

@@ -62,20 +62,62 @@ export function MobileMenu({ children, 'aria-label': ariaLabel }: MobileMenuProp
 
   return (
     <>
-      <button
+      <MobileMenuButton
+        isOpen={isOpen}
         onClick={() => setIsOpen(!isOpen)}
+        ariaLabel={ariaLabel ?? 'Toggle menu'}
+      />
+      {isOpen && (
+        <MobileMenuDrawer
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          ariaLabel={ariaLabel ?? 'Mobile menu'}
+        >
+          {children}
+        </MobileMenuDrawer>
+      )}
+    </>
+  )
+}
+
+function MobileMenuButton({
+  isOpen,
+  onClick,
+  ariaLabel,
+}: {
+  isOpen: boolean
+  onClick: () => void
+  ariaLabel: string
+}): React.ReactElement {
+  return (
+    <button
+      onClick={onClick}
       className="md:hidden text-cyber-accent hover:text-neon-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-neon-cyan rounded p-2"
-        aria-label={ariaLabel ?? 'Toggle menu'}
+      aria-label={ariaLabel}
       aria-expanded={isOpen}
       aria-controls="mobile-menu"
     >
       <HamburgerIcon isOpen={isOpen} />
     </button>
-      {isOpen && (
+  )
+}
+
+function MobileMenuDrawer({
+  isOpen,
+  onClose,
+  ariaLabel,
+  children,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  ariaLabel: string
+  children: ReactNode
+}): React.ReactElement {
+  return (
     <>
       <div
         className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
-            onClick={() => setIsOpen(false)}
+        onClick={onClose}
         aria-hidden="true"
       />
       <div
@@ -83,12 +125,12 @@ export function MobileMenu({ children, 'aria-label': ariaLabel }: MobileMenuProp
         className="fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-cyber-dark border-l border-neon-cyan/30 shadow-glow-cyan z-50 transform transition-transform md:hidden overflow-y-auto"
         role="dialog"
         aria-modal="true"
-            aria-label={ariaLabel ?? 'Mobile menu'}
+        aria-label={ariaLabel}
       >
         <div className="p-4">
           <div className="flex justify-end mb-4">
             <button
-                  onClick={() => setIsOpen(false)}
+              onClick={onClose}
               className="text-cyber-accent hover:text-neon-cyan text-2xl transition-colors focus:outline-none focus:ring-2 focus:ring-neon-cyan rounded"
               aria-label="Close menu"
             >
@@ -99,7 +141,5 @@ export function MobileMenu({ children, 'aria-label': ariaLabel }: MobileMenuProp
         </div>
       </div>
     </>
-      )}
-    </>
   )
 }