From d4bf88ab145bd8be9bd10efef7401c154a983fcc Mon Sep 17 00:00:00 2001 From: A5cend-dev Date: Wed, 27 May 2026 10:09:40 +0100 Subject: [PATCH 1/2] docs: implement responsive design for Mobile Navigation and add tests --- src/components/mobile/MobileNavigation.tsx | 95 ++++++++++-- src/components/mobile/README.md | 86 +++++++++++ .../__tests__/MobileNavigation.test.tsx | 146 ++++++++++++++++++ 3 files changed, 313 insertions(+), 14 deletions(-) create mode 100644 src/components/mobile/README.md create mode 100644 src/components/mobile/__tests__/MobileNavigation.test.tsx diff --git a/src/components/mobile/MobileNavigation.tsx b/src/components/mobile/MobileNavigation.tsx index 112f4643..352302a1 100644 --- a/src/components/mobile/MobileNavigation.tsx +++ b/src/components/mobile/MobileNavigation.tsx @@ -1,11 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { Home, Search, BookOpen, User } from 'lucide-react'; interface NavItem { id: string; label: string; icon: React.ReactNode; - onClick?: () => void; } export const MobileNavigation: React.FC<{ @@ -13,6 +12,7 @@ export const MobileNavigation: React.FC<{ onNavChange?: (id: string) => void; }> = ({ initialActive = 'home', onNavChange }) => { const [activeTab, setActiveTab] = useState(initialActive); + const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]); const navItems: NavItem[] = [ { id: 'home', label: 'Home', icon: }, @@ -21,40 +21,107 @@ export const MobileNavigation: React.FC<{ { id: 'profile', label: 'Profile', icon: }, ]; + // Sync state with prop + useEffect(() => { + setActiveTab(initialActive); + }, [initialActive]); + const handleTabClick = (id: string) => { setActiveTab(id); if (onNavChange) onNavChange(id); }; + const handleKeyDown = (e: React.KeyboardEvent, index: number) => { + let nextIndex = -1; + const length = navItems.length; + + if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { + nextIndex = (index + 1) % length; + } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { + nextIndex = (index - 1 + length) % length; + } else if (e.key === 'Home') { + nextIndex = 0; + } else if (e.key === 'End') { + nextIndex = length - 1; + } + + if (nextIndex !== -1) { + e.preventDefault(); + buttonRefs.current[nextIndex]?.focus(); + } + }; + return (