fix: responsive header with hamburger menu for mobile

- Desktop: single row with logo, nav links, QuickAdd, New note button
- Mobile: logo + QuickAdd + hamburger icon → dropdown menu
- Improved QuickAdd sizing for small screens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/header.tsx

@@ -1,18 +1,21 @@
 'use client'
 
+import { useState } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Button } from '@/components/ui/button'
-import { Plus, FileText, Settings } from 'lucide-react'
+import { Plus, FileText, Settings, Menu, X } from 'lucide-react'
 import { QuickAdd } from '@/components/quick-add'
 
 export function Header() {
   const pathname = usePathname()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
 
   return (
     <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container mx-auto px-4 flex h-14 items-center justify-between">
-        <div className="flex items-center gap-4">
+      <div className="container mx-auto px-2 sm:px-4">
+        {/* Desktop: single row */}
+        <div className="hidden sm:flex h-14 items-center justify-between gap-2">
           <Link href="/" className="flex items-center gap-2">
             <span className="text-xl font-bold">Recall</span>
           </Link>
@@ -38,16 +41,74 @@ export function Header() {
               </Button>
             </Link>
           </nav>
+          <div className="flex items-center gap-2">
+            <QuickAdd />
+            <Link href="/new">
+              <Button size="sm" className="gap-1.5">
+                <Plus className="h-4 w-4" />
+                Nueva nota
+              </Button>
+            </Link>
+          </div>
         </div>
-        <div className="flex items-center gap-3">
-          <QuickAdd />
-          <Link href="/new">
-            <Button size="sm" className="gap-1.5">
-              <Plus className="h-4 w-4" />
-              Nueva nota
-            </Button>
+
+        {/* Mobile: hamburger + logo */}
+        <div className="flex sm:hidden h-14 items-center justify-between gap-2">
+          <Link href="/" className="flex items-center gap-2">
+            <span className="text-lg font-bold">Recall</span>
           </Link>
+          <div className="flex items-center gap-2">
+            <QuickAdd />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="p-2"
+            >
+              {mobileMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
         </div>
+
+        {/* Mobile dropdown menu */}
+        {mobileMenuOpen && (
+          <div className="sm:hidden py-3 border-t flex flex-col gap-2">
+            <nav className="flex flex-col gap-1">
+              <Link href="/notes" onClick={() => setMobileMenuOpen(false)}>
+                <Button
+                  variant={pathname === '/notes' ? 'secondary' : 'ghost'}
+                  size="sm"
+                  className="w-full justify-start gap-2"
+                >
+                  <FileText className="h-4 w-4" />
+                  Notas
+                </Button>
+              </Link>
+              <Link href="/settings" onClick={() => setMobileMenuOpen(false)}>
+                <Button
+                  variant={pathname === '/settings' ? 'secondary' : 'ghost'}
+                  size="sm"
+                  className="w-full justify-start gap-2"
+                >
+                  <Settings className="h-4 w-4" />
+                  Configuración
+                </Button>
+              </Link>
+            </nav>
+            <div className="border-t pt-2">
+              <Link href="/new" onClick={() => setMobileMenuOpen(false)}>
+                <Button size="sm" className="w-full justify-start gap-2">
+                  <Plus className="h-4 w-4" />
+                  Nueva nota
+                </Button>
+              </Link>
+            </div>
+          </div>
+        )}
       </div>
     </header>
   )