feat: responsive sidebar, client selector and layout with alert/device counts

src/components/layout/Header.tsx

@@ -1,9 +1,12 @@
 'use client'
 
 import { useState } from 'react'
-import { Bell, Search, User, LogOut, Settings, ChevronDown } from 'lucide-react'
+import { Bell, Search, User, LogOut, Settings, ChevronDown, Menu } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import ClientSelector from './ClientSelector'
+import { useSelectedClient } from '@/components/providers/SelectedClientProvider'
+
+export type HeaderClient = { id: string; nombre: string; codigo: string }
 
 interface HeaderProps {
   user?: {
@@ -13,17 +16,36 @@ interface HeaderProps {
     rol: string
   }
   onLogout?: () => void
+  clients?: HeaderClient[]
+  showAllClientsOption?: boolean
+  onOpenSidebar?: () => void
 }
 
-export default function Header({ user, onLogout }: HeaderProps) {
+export default function Header({
+  user,
+  onLogout,
+  clients = [],
+  showAllClientsOption = false,
+  onOpenSidebar,
+}: HeaderProps) {
   const [showUserMenu, setShowUserMenu] = useState(false)
   const [showNotifications, setShowNotifications] = useState(false)
+  const { selectedClientId, setSelectedClientId } = useSelectedClient()
 
   return (
-    <header className="h-16 bg-dark-400 border-b border-dark-100 flex items-center justify-between px-6">
-      {/* Search */}
-      <div className="flex items-center gap-4 flex-1">
-        <div className="relative w-96">
+    <header className="h-16 bg-dark-400 border-b border-dark-100 flex items-center justify-between gap-2 px-4 sm:px-6">
+      <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
+        {onOpenSidebar != null && (
+          <button
+            type="button"
+            onClick={onOpenSidebar}
+            aria-label="Abrir menú"
+            className="md:hidden shrink-0 p-2 rounded-lg hover:bg-dark-100 text-gray-400 hover:text-white transition-colors"
+          >
+            <Menu className="w-6 h-6" />
+          </button>
+        )}
+        <div className="relative w-full max-w-xs sm:max-w-none sm:w-96">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
           <input
             type="text"
@@ -31,9 +53,13 @@ export default function Header({ user, onLogout }: HeaderProps) {
             className="input pl-10 bg-dark-300"
           />
         </div>
-
         {/* Client Selector */}
-        <ClientSelector />
+        <ClientSelector
+          clients={clients}
+          selectedId={selectedClientId}
+          onChange={setSelectedClientId}
+          showAll={showAllClientsOption}
+        />
       </div>
 
       {/* Right section */}
@@ -79,7 +105,7 @@ export default function Header({ user, onLogout }: HeaderProps) {
                   />
                 </div>
                 <div className="px-4 py-3 border-t border-dark-100">
-                  <a href="/alertas" className="text-primary-500 text-sm hover:underline">
+                  <a href="/alerts" className="text-primary-500 text-sm hover:underline">
                     Ver todas las alertas
                   </a>
                 </div>