another one

frontend/style/components/header.tsx

@@ -5,14 +5,13 @@ import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { Search } from "./search"
 import { Button } from "./ui/button"
-import { ShoppingCart, Heart, User, Menu, X } from "lucide-react"
+import { ShoppingCart, Heart, User, Menu } from "lucide-react"
 import { CatalogMenu } from "./catalog-menu"
-import { Sheet, SheetContent, SheetTrigger, SheetClose } from "./ui/sheet"
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
 import { useCart } from "@/contexts/cart-context"
 import { useFavorites } from "@/contexts/favorites-context"
 import { useAuth } from "@/contexts/auth-context"
 import { Badge } from "./ui/badge"
-import { CartSummary } from "./cart-summary"
 
 export function Header() {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
@@ -24,96 +23,21 @@ export function Header() {
 
   const handleNavigate = (path: string) => {
     router.push(path)
-    setIsMenuOpen(false) // Закрываем меню после навигации
+    setIsMenuOpen(false)
   }
 
   return (
     <header className="border-b sticky top-0 bg-white z-50">
       <div className="container mx-auto px-4 py-4">
-        <div className="flex flex-wrap items-center justify-between">
-          <div className="flex items-center w-full sm:w-auto mb-4 sm:mb-0">
-            <Link href="/" className="text-2xl font-bold text-blue-600 mr-4">
-              STORE
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 sm:gap-8">
+          {/* Левая секция: логотип и каталог */}
+          <div className="flex items-center gap-4 w-full sm:w-auto justify-between sm:justify-start">
+            <Link href="/" className="text-2xl font-bold text-blue-600">
+              ETERNOS
             </Link>
             <div className="hidden sm:block">
               <CatalogMenu />
             </div>
-          </div>
-          <div className="flex items-center w-full sm:flex-1 order-3 sm:order-2 mb-4 sm:mb-0">
-            <div className="flex-grow mr-4">
-              <Search />
-            </div>
-            <div className="hidden sm:flex items-center gap-4">
-              <Button variant="ghost" size="icon" asChild>
-                <Link href={isLoggedIn ? "/profile" : "/login"}>
-                  <User className="h-5 w-5" />
-                </Link>
-              </Button>
-              <Button variant="ghost" size="icon" className="relative" asChild>
-                <Link href="/favorites">
-                  <Heart className="h-5 w-5" />
-                  {getTotalFavorites() > 0 && (
-                    <Badge
-                      variant="destructive"
-                      className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
-                    >
-                      {getTotalFavorites()}
-                    </Badge>
-                  )}
-                </Link>
-              </Button>
-              <Link href="/cart">
-              <Button variant="ghost" size="icon" className="relative">
-                <ShoppingCart className="h-5 w-5" />
-                </Button>
-                </Link>
-
-              {/* <Sheet open={isCartOpen} onOpenChange={setIsCartOpen}>
-                <SheetTrigger asChild>
-                  <Button variant="ghost" size="icon" className="relative">
-                    <ShoppingCart className="h-5 w-5" />
-                    <Link href="/cart" onClick={() => setIsCartOpen(false)}>
-	                        
-                      </Link>
-                    {getTotalUniqueItems() > 0 && (
-                      <Badge
-                        variant="destructive"
-                        className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
-                      >
-                        {getTotalUniqueItems()}
-                      </Badge>
-                    )}
-                  </Button>
-                </SheetTrigger>
-                <SheetContent side="right" className="w-full sm:max-w-md">
-                  
-                  <div className="mt-6">
-                    <Button asChild className="w-full">
-                      <Link href="/cart" onClick={() => setIsCartOpen(false)}>
-	                        Перейти в корзину
-                      </Link>
-                    </Button>
-                  </div>
-                  <div className="flex justify-between items-center mb-6">
-                    <h2 className="text-2xl font-bold">Корзина</h2>
-                    <SheetClose asChild>
-                      <Button variant="ghost" size="icon">
-                        <X className="h-5 w-5" />
-                      </Button>
-                    </SheetClose>
-                  </div>
-                  <CartSummary />
-                  <div className="mt-6">
-                    <Button asChild className="w-full">
-                      <Link href="/cart" onClick={() => setIsCartOpen(false)}>
-	                        Перейти в корзину
-                      </Link>
-                    </Button>
-                  </div>
-                 
-                </SheetContent>
-              </Sheet> */}
-            </div>
             <div className="sm:hidden">
               <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                 <SheetTrigger asChild>
@@ -121,39 +45,87 @@ export function Header() {
                     <Menu className="h-5 w-5" />
                   </Button>
                 </SheetTrigger>
-                <SheetContent side="right" className="h-[100vh] pt-16">
-                  <nav className="flex flex-col gap-4">
+                <SheetContent
+                  side="right"
+                  className="w-[300px] h-[100vh] border-l"
+                  // Отключаем стандартную кнопку закрытия
+                  closeButton={false}
+                >
+                  <nav className="flex flex-col gap-4 pt-2">
                     <div className="border-b pb-4">
                       <CatalogMenu onSelect={() => setIsMenuOpen(false)} />
                     </div>
-                    <button
-                      onClick={() => handleNavigate(isLoggedIn ? "/profile" : "/login")}
+                    <Link
+                      href={isLoggedIn ? "/profile" : "/login"}
                       className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
+                      onClick={() => setIsMenuOpen(false)}
                     >
                       <User className="h-5 w-5" />
                       <span>Личный кабинет</span>
-                    </button>
-                    <button
-                      onClick={() => handleNavigate("/favorites")}
+                    </Link>
+                    <Link
+                      href="/favorites"
                       className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
+                      onClick={() => setIsMenuOpen(false)}
                     >
                       <Heart className="h-5 w-5" />
                       <span>Избранное</span>
                       {getTotalFavorites() > 0 && <Badge variant="destructive">{getTotalFavorites()}</Badge>}
-                    </button>
-                    <button
-                      onClick={() => handleNavigate("/cart")}
+                    </Link>
+                    <Link
+                      href="/cart"
                       className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
+                      onClick={() => setIsMenuOpen(false)}
                     >
                       <ShoppingCart className="h-5 w-5" />
                       <span>Корзина</span>
                       {getTotalUniqueItems() > 0 && <Badge variant="destructive">{getTotalUniqueItems()}</Badge>}
-                    </button>
+                    </Link>
                   </nav>
                 </SheetContent>
               </Sheet>
             </div>
           </div>
+
+          {/* Центральная секция: поиск */}
+          <div className="w-full sm:max-w-lg">
+            <Search />
+          </div>
+
+          {/* Правая секция: кнопки действий */}
+          <div className="hidden sm:flex items-center gap-6 justify-end">
+            <Button variant="ghost" size="icon" asChild>
+              <Link href={isLoggedIn ? "/profile" : "/login"}>
+                <User className="h-5 w-5" />
+              </Link>
+            </Button>
+            <Button variant="ghost" size="icon" className="relative" asChild>
+              <Link href="/favorites">
+                <Heart className="h-5 w-5" />
+                {getTotalFavorites() > 0 && (
+                  <Badge
+                    variant="destructive"
+                    className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
+                  >
+                    {getTotalFavorites()}
+                  </Badge>
+                )}
+              </Link>
+            </Button>
+            <Button variant="ghost" size="icon" className="relative" asChild>
+              <Link href="/cart">
+                <ShoppingCart className="h-5 w-5" />
+                {getTotalUniqueItems() > 0 && (
+                  <Badge
+                    variant="destructive"
+                    className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
+                  >
+                    {getTotalUniqueItems()}
+                  </Badge>
+                )}
+              </Link>
+            </Button>
+          </div>
         </div>
       </div>
     </header>