Fix frontend 3

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -256,7 +256,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
     collapseItem,
   }), [scrollToItem, expandItem, collapseItem]);
 
-  // Handle keyboard navigation
+  // Handle keyboard navigation and touch gestures
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && isOpen && onClose) {
@@ -264,8 +264,40 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
       }
     };
 
+    let touchStartX = 0;
+    let touchStartY = 0;
+    
+    const handleTouchStart = (e: TouchEvent) => {
+      if (isOpen) {
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!isOpen || !onClose) return;
+      
+      const touchCurrentX = e.touches[0].clientX;
+      const touchCurrentY = e.touches[0].clientY;
+      const deltaX = touchStartX - touchCurrentX;
+      const deltaY = Math.abs(touchStartY - touchCurrentY);
+      
+      // Only trigger swipe left to close if it's more horizontal than vertical
+      // and the swipe distance is significant
+      if (deltaX > 50 && deltaX > deltaY * 2) {
+        onClose();
+      }
+    };
+
     document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
+    document.addEventListener('touchstart', handleTouchStart, { passive: true });
+    document.addEventListener('touchmove', handleTouchMove, { passive: true });
+    
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('touchstart', handleTouchStart);
+      document.removeEventListener('touchmove', handleTouchMove);
+    };
   }, [isOpen, onClose]);
 
   // Render navigation item
@@ -443,10 +475,11 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
       {/* Mobile Drawer */}
       <aside
         className={clsx(
-          'fixed left-0 top-[var(--header-height)] bottom-0 w-[var(--sidebar-width)]',
+          'fixed inset-y-0 left-0 w-[var(--sidebar-width)] max-w-[85vw]',
           'bg-[var(--bg-primary)] border-r border-[var(--border-primary)]',
-          'transition-transform duration-300 ease-in-out z-[var(--z-fixed)]',
+          'transition-transform duration-300 ease-in-out z-[var(--z-modal)]',
           'lg:hidden flex flex-col',
+          'shadow-xl',
           isOpen ? 'translate-x-0' : '-translate-x-full'
         )}
         aria-label="Navegación principal"
@@ -470,8 +503,8 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
         </div>
 
         {/* Navigation */}
-        <nav className="flex-1 p-4 overflow-y-auto">
-          <ul className="space-y-2">
+        <nav className="flex-1 p-4 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
+          <ul className="space-y-2 pb-4">
             {visibleItems.map(item => renderItem(item))}
           </ul>
         </nav>