demo2

app/components/layout/DashboardLayout.tsx

@@ -4,6 +4,7 @@ import { Sidebar } from './Sidebar';
 import { Container } from './Container';
 import { Flex } from './Flex';
 import { Text, Button } from '../ui';
+import { designTokens } from '~/lib/design-tokens';
 
 interface DashboardLayoutProps {
   children: ReactNode;
@@ -12,20 +13,29 @@ interface DashboardLayoutProps {
     name: string;
     authLevel: number;
   };
+  title?: string; // Optional page title for mobile header
 }
 
-export function DashboardLayout({ children, user }: DashboardLayoutProps) {
+export function DashboardLayout({ children, user, title }: DashboardLayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
+  const [isClient, setIsClient] = useState(false);
+
+  // Set client-side flag
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
 
   // Handle responsive behavior
   useEffect(() => {
+    if (!isClient) return;
+
     const checkMobile = () => {
-      const mobile = window.innerWidth < 768;
+      const mobile = window.innerWidth < 768; // md breakpoint
       setIsMobile(mobile);
       
-      // Auto-collapse sidebar on mobile
+      // Auto-collapse sidebar on mobile and tablet
       if (mobile) {
         setSidebarCollapsed(true);
       }
@@ -35,15 +45,17 @@ export function DashboardLayout({ children, user }: DashboardLayoutProps) {
     window.addEventListener('resize', checkMobile);
     
     return () => window.removeEventListener('resize', checkMobile);
-  }, []);
+  }, [isClient]);
 
   // Load sidebar state from localStorage
   useEffect(() => {
+    if (!isClient) return;
+    
     const savedState = localStorage.getItem('sidebarCollapsed');
     if (savedState !== null && !isMobile) {
       setSidebarCollapsed(JSON.parse(savedState));
     }
-  }, [isMobile]);
+  }, [isMobile, isClient]);
 
   // Save sidebar state to localStorage
   const handleSidebarToggle = () => {
@@ -84,66 +96,87 @@ export function DashboardLayout({ children, user }: DashboardLayoutProps) {
       />
 
       {/* Main Content */}
-      <div className={`
-        flex-1 min-h-screen transition-all duration-300 ease-in-out
-        ${!isMobile ? (sidebarCollapsed ? 'mr-16' : 'mr-64') : 'mr-0'}
-      `}>
+      <div 
+        className="flex-1 min-h-screen transition-all duration-300 ease-out"
+        style={{
+          marginRight: isClient ? (isMobile ? '0' : (sidebarCollapsed ? '4rem' : '16rem')) : '16rem'
+        }}
+      >
         {/* Header */}
-        <div className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-10">
+        <header 
+          className="bg-white shadow-sm border-b border-gray-200 sticky top-0"
+          style={{ zIndex: designTokens.zIndex.header }}
+        >
           <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex justify-between items-center py-4">
-              {/* Mobile menu button and title */}
-              <div className="flex items-center gap-4">
-                {isMobile && (
-                  <button
-                    onClick={() => setMobileMenuOpen(true)}
-                    className="p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            <div className="flex justify-between items-center h-16">
+              {/* Mobile menu button and title - Always render, hide with CSS */}
+              <div className="flex items-center gap-3 md:gap-4">
+                <button
+                  onClick={() => setMobileMenuOpen(true)}
+                  className="md:hidden 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="فتح القائمة"
+                  aria-expanded={mobileMenuOpen}
+                >
+                  <svg
+                    className="h-6 w-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
                   >
-                    <svg
-                      className="h-6 w-6"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M4 6h16M4 12h16M4 18h16"
-                      />
-                    </svg>
-                  </button>
-                )}
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 6h16M4 12h16M4 18h16"
+                    />
+                  </svg>
+                </button>
                 
-                {/* Page title - only show on mobile when sidebar is closed */}
-                {isMobile && (
-                  <h1 className="text-lg font-semibold text-gray-900">
-                    لوحة التحكم
-                  </h1>
-                )}
+                {/* Page title - show on mobile */}
+                <h1 className="text-base font-bold text-gray-900 md:hidden">
+                  {title || 'لوحة التحكم'}
+                </h1>
               </div>
               
               {/* User info and actions */}
-              <div className="flex items-center gap-4">
-                <div className="text-right">
-                  <div className="text-sm text-gray-600">
-                    مرحباً، <span className="font-medium text-gray-900">{user.name}</span>
+              <div className="flex items-center gap-2 sm:gap-3 md:gap-4">
+                {/* Desktop: Full user info */}
+                <div className="hidden lg:block text-right">
+                  <div className="text-sm font-medium text-gray-900">
+                    مرحباً، {user.name}
                   </div>
                   <div className="text-xs text-gray-500">
                     {getAuthLevelText(user.authLevel)}
                   </div>
                 </div>
                 
+                {/* Tablet: Name only */}
+                <div className="hidden md:block lg:hidden text-right">
+                  <div className="text-sm font-medium text-gray-900">
+                    {user.name}
+                  </div>
+                </div>
+                
+                {/* Mobile: Compact display */}
+                <div className="md:hidden text-right">
+                  <div className="text-xs font-medium text-gray-900">
+                    {user.name}
+                  </div>
+                </div>
+                
                 <Form action="/logout" method="post">
                   <button
                     type="submit"
-                    className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150"
+                    className="inline-flex items-center px-2.5 py-1.5 sm:px-3 sm:py-2 border border-transparent text-xs sm:text-sm leading-4 font-medium rounded-lg text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150"
+                    aria-label="تسجيل الخروج"
                   >
                     <svg
-                      className="h-4 w-4 mr-1"
+                      className="h-4 w-4 sm:mr-1"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
+                      aria-hidden="true"
                     >
                       <path
                         strokeLinecap="round"
@@ -152,16 +185,16 @@ export function DashboardLayout({ children, user }: DashboardLayoutProps) {
                         d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                       />
                     </svg>
-                    خروج
+                    <span className="hidden sm:inline">خروج</span>
                   </button>
                 </Form>
               </div>
             </div>
           </div>
-        </div>
+        </header>
 
         {/* Page Content */}
-        <main className="flex-1 p-6">
+        <main className="flex-1 p-4 sm:p-5 md:p-6 lg:p-8">
           {children}
         </main>
       </div>

app/components/layout/Grid.tsx

@@ -5,7 +5,13 @@ interface GridProps {
   children: ReactNode;
   className?: string;
   config?: Partial<LayoutConfig>;
-  cols?: 1 | 2 | 3 | 4 | 6 | 12;
+  cols?: 1 | 2 | 3 | 4 | 6 | 12 | {
+    xs?: 1 | 2 | 3 | 4 | 6 | 12;
+    sm?: 1 | 2 | 3 | 4 | 6 | 12;
+    md?: 1 | 2 | 3 | 4 | 6 | 12;
+    lg?: 1 | 2 | 3 | 4 | 6 | 12;
+    xl?: 1 | 2 | 3 | 4 | 6 | 12;
+  };
   gap?: 'sm' | 'md' | 'lg' | 'xl';
   responsive?: {
     sm?: 1 | 2 | 3 | 4 | 6 | 12;
@@ -35,19 +41,45 @@ export function Grid({
   };
   
   const gapClasses = {
-    sm: 'gap-2',
-    md: 'gap-4',
-    lg: 'gap-6',
-    xl: 'gap-8',
+    sm: 'gap-2 sm:gap-2.5 md:gap-3',
+    md: 'gap-3 sm:gap-4 md:gap-5 lg:gap-6',
+    lg: 'gap-4 sm:gap-5 md:gap-6 lg:gap-8',
+    xl: 'gap-6 sm:gap-7 md:gap-8 lg:gap-10',
   };
   
-  const responsiveClasses = Object.entries(responsive)
-    .map(([breakpoint, cols]) => `${breakpoint}:${colsClasses[cols]}`)
-    .join(' ');
+  // Handle both old responsive prop and new cols object format
+  let gridColsClass = '';
+  
+  if (typeof cols === 'object') {
+    // New format: cols={{ xs: 1, sm: 2, md: 3, lg: 4 }}
+    const xs = cols.xs || 1;
+    const sm = cols.sm || cols.xs || 1;
+    const md = cols.md || cols.sm || cols.xs || 2;
+    const lg = cols.lg || cols.md || cols.sm || 3;
+    const xl = cols.xl || cols.lg || cols.md || 4;
+    
+    gridColsClass = `
+      ${colsClasses[xs]}
+      sm:${colsClasses[sm]}
+      md:${colsClasses[md]}
+      lg:${colsClasses[lg]}
+      xl:${colsClasses[xl]}
+    `;
+  } else {
+    // Old format: cols={4} with responsive prop
+    gridColsClass = colsClasses[cols];
+    
+    if (Object.keys(responsive).length > 0) {
+      const responsiveClasses = Object.entries(responsive)
+        .map(([breakpoint, cols]) => `${breakpoint}:${colsClasses[cols]}`)
+        .join(' ');
+      gridColsClass = `${gridColsClass} ${responsiveClasses}`;
+    }
+  }
   
   return (
     <div 
-      className={`grid-rtl ${colsClasses[cols]} ${gapClasses[gap]} ${responsiveClasses} ${className}`}
+      className={`grid ${gridColsClass} ${gapClasses[gap]} ${className}`}
       dir={layoutConfig.direction}
     >
       {children}

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>
+    </>
   );
 }