demo2

app/components/layout/Sidebar.tsx

@@ -1,6 +1,7 @@
-import { ReactNode, useState, useEffect } from 'react';
+import { ReactNode, useState, useEffect, useRef } from 'react';
 import { Link, useLocation } from '@remix-run/react';
-import { getResponsiveClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
+import { useFocusTrap } from '~/hooks/useFocusTrap';
+import { designTokens } from '~/lib/design-tokens';
 
 interface SidebarProps {
   isCollapsed: boolean;
@@ -103,112 +104,193 @@ const navigationItems: NavigationItem[] = [
 
 export function Sidebar({ isCollapsed, onToggle, isMobile, isOpen, onClose, userAuthLevel }: SidebarProps) {
   const location = useLocation();
+  const sidebarRef = useRef<HTMLElement>(null);
+  const [announcement, setAnnouncement] = useState('');
+  const [isClient, setIsClient] = useState(false);
+
+  // Set client-side flag
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
   // Filter navigation items based on user auth level
   const filteredNavItems = navigationItems.filter(item => 
     !item.authLevel || userAuthLevel <= item.authLevel
   );
 
-  // Close sidebar on route change for mobile
+  // Enable focus trap for mobile menu when open
+  useFocusTrap(sidebarRef, isOpen && isClient);
+
+  // Close sidebar on route change
   useEffect(() => {
-    if (isMobile && isOpen) {
+    if (isOpen) {
       onClose();
     }
-  }, [location.pathname, isMobile, isOpen, onClose]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
 
-  if (isMobile) {
-    return (
-      <>
-        {/* Mobile overlay */}
-        {isOpen && (
-          <div 
-            className="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300"
-            onClick={onClose}
-          />
-        )}
+  // Handle Escape key to close mobile menu
+  useEffect(() => {
+    if (!isClient) return;
 
-        {/* Mobile Sidebar */}
-        <div className={`
-          fixed top-0 right-0 h-full w-64 bg-white shadow-lg z-50 transform transition-transform duration-300 ease-in-out
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+        setAnnouncement('القائمة مغلقة');
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose, isClient]);
+
+  // Announce menu state changes for screen readers
+  useEffect(() => {
+    if (isOpen && isClient) {
+      setAnnouncement('القائمة مفتوحة');
+    }
+  }, [isOpen, isClient]);
+
+  // Render both mobile and desktop sidebars, use CSS to show/hide
+  return (
+    <>
+      {/* Screen reader announcement */}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {announcement}
+      </div>
+
+      {/* Mobile overlay - only show on mobile/tablet */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300 md:hidden"
+          style={{ zIndex: designTokens.zIndex.overlay }}
+          onClick={onClose}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Mobile Sidebar - hidden on desktop (md+) */}
+      <aside
+        ref={sidebarRef}
+        className={`
+          md:hidden
+          fixed top-0 right-0 h-full w-80 max-w-[85vw] bg-white shadow-2xl
+          transform transition-transform duration-300 ease-out
           ${isOpen ? 'translate-x-0' : 'translate-x-full'}
-        `} dir="rtl">
-          {/* Mobile Header */}
-          <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
-            <div className="flex items-center">
-              <div className="h-8 w-8 bg-blue-600 rounded-full flex items-center justify-center">
-                <svg className="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
-              </div>
-              <h1 className="ml-3 text-lg font-semibold text-gray-900">نظام الصيانة</h1>
-            </div>
-            <button
-              onClick={onClose}
-              className="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100"
-            >
-              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+        `}
+        style={{ zIndex: designTokens.zIndex.sidebar }}
+        dir="rtl"
+        role="navigation"
+        aria-label="القائمة الرئيسية"
+        aria-hidden={!isOpen}
+      >
+        {/* Mobile Header */}
+        <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
+              <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
               </svg>
-            </button>
+            </div>
+            <h1 className="text-lg font-bold text-gray-900">نظام الصيانة</h1>
           </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
+            aria-label="إغلاق القائمة"
+          >
+            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
 
-          {/* Mobile Navigation */}
-          <nav className="mt-5 px-2 flex-1 overflow-y-auto">
-            <div className="space-y-1">
-              {filteredNavItems.map((item) => {
-                const isActive = location.pathname === item.href;
-                return (
+        {/* Mobile Navigation */}
+        <nav className="flex-1 overflow-y-auto px-3 py-4" aria-label="القائمة الرئيسية">
+          <ul className="space-y-1" role="list">
+            {filteredNavItems.map((item) => {
+              const isActive = location.pathname === item.href;
+              return (
+                <li key={item.name}>
                   <Link
-                    key={item.name}
                     to={item.href}
                     className={`
-                      group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 relative
-                      ${isActive ? 'bg-blue-100 text-blue-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}
+                      group flex items-center gap-3 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-150 relative
+                      ${isActive 
+                        ? 'bg-blue-50 text-blue-900 shadow-sm' 
+                        : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
+                      }
                     `}
+                    aria-current={isActive ? 'page' : undefined}
                   >
-                    {isActive && <div className="absolute right-0 top-0 bottom-0 w-1 bg-blue-600 rounded-l-md"></div>}
-                    <div className={`flex-shrink-0 ${isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-500'}`}>
+                    {isActive && (
+                      <div className="absolute right-0 top-0 bottom-0 w-1 bg-blue-600 rounded-l-md" aria-hidden="true"></div>
+                    )}
+                    <div className={`flex-shrink-0 ${isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'}`}>
                       {item.icon}
                     </div>
-                    <span className="ml-3">{item.name}</span>
+                    <span className="flex-1">{item.name}</span>
                   </Link>
-                );
-              })}
-            </div>
-          </nav>
-        </div>
-      </>
-    );
-  }
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
 
-  // Desktop Sidebar
-  return (
-    <div className={`
-      fixed top-0 right-0 h-full bg-white shadow-lg z-40 transition-all duration-300 ease-in-out
-      ${isCollapsed ? 'w-16' : 'w-64'}
-    `} dir="rtl">
+        {/* Mobile Footer */}
+        <div className="border-t border-gray-200 p-4 bg-gray-50">
+          <p className="text-xs text-gray-500 text-center">
+            نظام إدارة صيانة السيارات
+          </p>
+        </div>
+      </aside>
+
+      {/* Desktop Sidebar - hidden on mobile/tablet (< md) */}
+      <aside
+        className={`
+          hidden md:block
+          fixed top-0 right-0 h-full bg-white shadow-lg
+          transition-all duration-300 ease-out
+          ${isCollapsed ? 'w-16' : 'w-64'}
+        `}
+        style={{ zIndex: designTokens.zIndex.sidebar }}
+        dir="rtl"
+        role="navigation"
+        aria-label="القائمة الرئيسية"
+      >
       {/* Desktop Header */}
-      <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
-        <div className="flex items-center flex-1">
-          <div className="h-8 w-8 bg-blue-600 rounded-full flex items-center justify-center">
-            <svg className="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white">
+        <div className="flex items-center flex-1 min-w-0">
+          <div className="h-10 w-10 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
+            <svg className="h-6 w-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
             </svg>
           </div>
           {!isCollapsed && (
-            <h1 className="ml-3 text-lg font-semibold text-gray-900">نظام الصيانة</h1>
+            <h1 className="mr-3 text-lg font-bold text-gray-900 truncate">نظام الصيانة</h1>
           )}
         </div>
         
         <button
-          onClick={onToggle}
-          className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          onClick={() => {
+            onToggle();
+            setAnnouncement(isCollapsed ? 'القائمة موسعة' : 'القائمة مطوية');
+          }}
+          className="p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors flex-shrink-0"
+          aria-label={isCollapsed ? 'توسيع القائمة' : 'طي القائمة'}
+          aria-expanded={!isCollapsed}
         >
           <svg
-            className={`h-4 w-4 transform transition-transform duration-200 ${isCollapsed ? 'rotate-180' : ''}`}
+            className={`h-5 w-5 transform transition-transform duration-200 ${isCollapsed ? 'rotate-180' : ''}`}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
+            aria-hidden="true"
           >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
           </svg>
@@ -216,42 +298,51 @@ export function Sidebar({ isCollapsed, onToggle, isMobile, isOpen, onClose, user
       </div>
 
       {/* Desktop Navigation */}
-      <nav className="mt-5 px-2 flex-1 overflow-y-auto">
-        <div className="space-y-1">
+      <nav className="flex-1 overflow-y-auto px-2 py-4" aria-label="القائمة الرئيسية">
+        <ul className="space-y-1" role="list">
           {filteredNavItems.map((item) => {
             const isActive = location.pathname === item.href;
             return (
-              <Link
-                key={item.name}
-                to={item.href}
-                className={`
-                  group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150 relative
-                  ${isActive ? 'bg-blue-100 text-blue-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}
-                  ${isCollapsed ? 'justify-center' : ''}
-                `}
-                title={isCollapsed ? item.name : undefined}
-              >
-                {isActive && <div className="absolute right-0 top-0 bottom-0 w-1 bg-blue-600 rounded-l-md"></div>}
-                <div className={`flex-shrink-0 ${isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-500'}`}>
-                  {item.icon}
-                </div>
-                {!isCollapsed && (
-                  <span className="ml-3 truncate">{item.name}</span>
-                )}
-              </Link>
+              <li key={item.name}>
+                <Link
+                  to={item.href}
+                  className={`
+                    group flex items-center gap-3 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-150 relative
+                    ${isActive 
+                      ? 'bg-blue-50 text-blue-900 shadow-sm' 
+                      : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
+                    }
+                    ${isCollapsed ? 'justify-center' : ''}
+                  `}
+                  title={isCollapsed ? item.name : undefined}
+                  aria-label={isCollapsed ? item.name : undefined}
+                  aria-current={isActive ? 'page' : undefined}
+                >
+                  {isActive && !isCollapsed && (
+                    <div className="absolute right-0 top-0 bottom-0 w-1 bg-blue-600 rounded-l-md" aria-hidden="true"></div>
+                  )}
+                  <div className={`flex-shrink-0 ${isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'}`}>
+                    {item.icon}
+                  </div>
+                  {!isCollapsed && (
+                    <span className="flex-1 truncate">{item.name}</span>
+                  )}
+                </Link>
+              </li>
             );
           })}
-        </div>
+        </ul>
       </nav>
 
       {/* Desktop Footer */}
       {!isCollapsed && (
-        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
-          <div className="text-xs text-gray-500 text-center">
+        <div className="border-t border-gray-200 p-4 bg-gray-50">
+          <p className="text-xs text-gray-500 text-center">
             نظام إدارة صيانة السيارات
-          </div>
+          </p>
         </div>
       )}
-    </div>
+    </aside>
+    </>
   );
 }