reviews

frontend/style/components/header.tsx

@@ -4,88 +4,135 @@ import { useState } from "react"
 import Link from "next/link"
 import { Search } from "./search"
 import { Button } from "./ui/button"
-import { ShoppingCart, Heart, Package2, User, Menu } from 'lucide-react'
+import { ShoppingCart, Heart, User, Menu, X } from "lucide-react"
 import { CatalogMenu } from "./catalog-menu"
-import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
+import { Sheet, SheetContent, SheetTrigger, SheetClose } 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)
-  const { getTotalItems } = useCart()
+  const [isCartOpen, setIsCartOpen] = useState(false)
+  const { getTotalItems, getTotalUniqueItems } = useCart()
   const { getTotalFavorites } = useFavorites()
+  const { isLoggedIn } = useAuth()
 
   return (
     <header className="border-b sticky top-0 bg-white z-50">
-      <div className="container mx-auto px-4">
-        <div className="flex flex-col md:flex-row h-auto md:h-16 items-center justify-between">
-          <div className="flex items-center gap-4 mt-4 md:mt-0">
-            {/* Используем отступ слева для надписи STORE */}
-            <Link href="/" className="text-2xl font-bold text-blue-600 ml-[100px] md:ml-0">
-              ETRNOS
+      <div className="container mx-auto px-4 py-4 w-[95%]">
+        <div className="flex flex-wrap items-center justify-between">
+          <div className="flex items-center w-full sm:w-auto mb-4 sm:mb-0 pl-0">
+            <Link href="/" className="text-2xl font-bold text-blue-600 mr-4">
+              STORE
             </Link>
-            <div className="hidden md:block">
+            <div className="hidden sm:block">
               <CatalogMenu />
             </div>
           </div>
-          <div className="hidden md:block flex-1 max-w-xl mx-4">
-            <Search />
-          </div>
-          <div className="flex items-center gap-4">
-            <div className="hidden md:flex items-center gap-4">
+          <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="/profile">
+                <Link href={isLoggedIn ? "/profile" : "/login"}>
                   <User className="h-5 w-5" />
                 </Link>
               </Button>
-              <Button variant="ghost" size="icon">
-                <Package2 className="h-5 w-5" />
-              </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">
+                    <Badge
+                      variant="destructive"
+                      className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0"
+                    >
                       {getTotalFavorites()}
                     </Badge>
                   )}
                 </Link>
               </Button>
-            </div>
-            <Button variant="ghost" size="icon" asChild className="relative">
-              <Link href="/cart">
-                <ShoppingCart className="h-5 w-5" />
-                {getTotalItems() > 0 && (
-                  <Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
-                    {getTotalItems()}
-                  </Badge>
-                )}
-              </Link>
-            </Button>
-            <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" className="md:hidden">
-                  <Menu className="h-5 w-5" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="left" className="w-[300px] sm:w-[400px]">
-                <nav className="flex flex-col gap-4">
-                  <Link href="/" onClick={() => setIsMenuOpen(false)}>Главная</Link>
-                  <Link href="/profile" onClick={() => setIsMenuOpen(false)}>Профиль</Link>
-                  <Link href="/cart" onClick={() => setIsMenuOpen(false)}>Корзина</Link>
-                  <div className="md:hidden">
-                    <CatalogMenu />
+              <Sheet open={isCartOpen} onOpenChange={setIsCartOpen}>
+                <SheetTrigger asChild>
+                  <Button variant="ghost" size="icon" className="relative">
+                    <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>
+                    )}
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="right" className="w-full sm:max-w-md">
+                  <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>
-                </nav>
-              </SheetContent>
-            </Sheet>
+                  <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>
+                  <Button variant="ghost" size="icon">
+                    <Menu className="h-5 w-5" />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent side="right" className="w-full sm:max-w-md">
+                  <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>
+                  <nav className="flex flex-col gap-4">
+                    <CatalogMenu />
+                    <Link
+                      href={isLoggedIn ? "/profile" : "/login"}
+                      className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md"
+                    >
+                      <User className="h-5 w-5" />
+                      <span>Личный кабинет</span>
+                    </Link>
+                    <Link href="/favorites" className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md">
+                      <Heart className="h-5 w-5" />
+                      <span>Избранное</span>
+                      {getTotalFavorites() > 0 && <Badge variant="destructive">{getTotalFavorites()}</Badge>}
+                    </Link>
+                    <Link href="/cart" className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md">
+                      <ShoppingCart className="h-5 w-5" />
+                      <span>Корзина</span>
+                      {getTotalUniqueItems() > 0 && <Badge variant="destructive">{getTotalUniqueItems()}</Badge>}
+                    </Link>
+                  </nav>
+                </SheetContent>
+              </Sheet>
+            </div>
           </div>
         </div>
-        <div className="md:hidden mt-2 mb-4">
-          <Search />
-        </div>
       </div>
     </header>
   )
-}
+}
+