Improve frontend 5

frontend/src/components/layout/Header/Header.tsx

@@ -3,10 +3,12 @@ import { clsx } from 'clsx';
 import { useNavigate } from 'react-router-dom';
 import { useAuthUser, useIsAuthenticated, useAuthActions } from '../../../stores';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { useBakery } from '../../../contexts/BakeryContext';
 import { Button } from '../../ui';
 import { Avatar } from '../../ui';
 import { Badge } from '../../ui';
 import { Modal } from '../../ui';
+import { BakerySelector } from '../../ui/BakerySelector/BakerySelector';
 import { 
   Menu, 
   Search, 
@@ -100,6 +102,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
   const isAuthenticated = useIsAuthenticated();
   const { logout } = useAuthActions();
   const { theme, resolvedTheme, setTheme } = useTheme();
+  const { bakeries, currentBakery, selectBakery } = useBakery();
   
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const [isSearchFocused, setIsSearchFocused] = useState(false);
@@ -216,7 +219,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
       aria-label="Navegación principal"
     >
       {/* Left section */}
-      <div className="flex items-center gap-4 flex-1 min-w-0 h-full">
+      <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0 h-full">
         {/* Mobile menu button */}
         <Button
           variant="ghost"
@@ -229,7 +232,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
         </Button>
 
         {/* Logo */}
-        <div className="flex items-center gap-3 min-w-0">
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-shrink-0">
           {logo || (
             <>
               <div className="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
@@ -237,7 +240,7 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
               </div>
               <h1 className={clsx(
                 'font-semibold text-[var(--text-primary)] transition-opacity duration-300',
-                'hidden sm:block text-lg leading-tight',
+                'hidden md:block text-lg leading-tight whitespace-nowrap',
                 'self-center',
                 sidebarCollapsed ? 'lg:block' : 'lg:hidden xl:block'
               )}>
@@ -247,6 +250,40 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
           )}
         </div>
 
+        {/* Bakery Selector - Desktop */}
+        {isAuthenticated && currentBakery && bakeries.length > 0 && (
+          <div className="hidden md:block mx-2 lg:mx-4 flex-shrink-0">
+            <BakerySelector
+              bakeries={bakeries}
+              selectedBakery={currentBakery}
+              onSelectBakery={selectBakery}
+              onAddBakery={() => {
+                // TODO: Navigate to add bakery page or open modal
+                console.log('Add new bakery');
+              }}
+              size="md"
+              className="min-w-[160px] max-w-[220px] lg:min-w-[200px] lg:max-w-[280px]"
+            />
+          </div>
+        )}
+
+        {/* Bakery Selector - Mobile (in title area) */}
+        {isAuthenticated && currentBakery && bakeries.length > 0 && (
+          <div className="md:hidden flex-1 min-w-0 ml-3">
+            <BakerySelector
+              bakeries={bakeries}
+              selectedBakery={currentBakery}
+              onSelectBakery={selectBakery}
+              onAddBakery={() => {
+                // TODO: Navigate to add bakery page or open modal
+                console.log('Add new bakery');
+              }}
+              size="sm"
+              className="w-full max-w-none"
+            />
+          </div>
+        )}
+
         {/* Search */}
         {showSearch && isAuthenticated && (
           <form