new styles

frontend/style/components/catalog-menu.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { Laptop, Smartphone, ShirtIcon, Home, Car, Baby, Dumbbell, BookOpen, Gift, MoreHorizontal } from 'lucide-react'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu"
+
+const categories = [
+  {
+    title: "Электроника",
+    icon: <Laptop className="w-5 h-5" />,
+    subcategories: ["Ноутбуки", "Планшеты", "Компьютеры", "Аксессуары"]
+  },
+  {
+    title: "Смартфоны и гаджеты",
+    icon: <Smartphone className="w-5 h-5" />,
+    subcategories: ["Телефоны", "Смарт-часы", "Наушники"]
+  },
+  {
+    title: "Одежда и обувь",
+    icon: <ShirtIcon className="w-5 h-5" />,
+    subcategories: ["Мужская одежда", "Женская одежда", "Обувь", "Аксессуары"]
+  },
+  {
+    title: "Дом и сад",
+    icon: <Home className="w-5 h-5" />,
+    subcategories: ["Мебель", "Текстиль", "Освещение", "Инструменты"]
+  },
+  {
+    title: "Авто",
+    icon: <Car className="w-5 h-5" />,
+    subcategories: ["Запчасти", "Шины", "Электроника", "Аксессуары"]
+  },
+  {
+    title: "Детские товары",
+    icon: <Baby className="w-5 h-5" />,
+    subcategories: ["Игрушки", "Питание", "Одежда", "Коляски"]
+  },
+  {
+    title: "Спорт и отдых",
+    icon: <Dumbbell className="w-5 h-5" />,
+    subcategories: ["Тренажеры", "Одежда", "Туризм"]
+  },
+  {
+    title: "Книги",
+    icon: <BookOpen className="w-5 h-5" />,
+    subcategories: ["Художественная", "Учебная", "Детская"]
+  },
+  {
+    title: "Подарки",
+    icon: <Gift className="w-5 h-5" />,
+    subcategories: ["Сувениры", "Цветы", "Подарочные наборы"]
+  },
+]
+
+export function CatalogMenu() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Каталог</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="w-[500px] p-4">
+              <div className="grid gap-3">
+                {categories.map((category) => (
+                  <Link
+                    key={category.title}
+                    href="#"
+                    className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md group"
+                  >
+                    <span className="group-hover:text-blue-600">{category.icon}</span>
+                    <div className="flex-1">
+                      <div className="font-medium group-hover:text-blue-600">{category.title}</div>
+                      <div className="text-sm text-gray-500">
+                        {category.subcategories.join(" • ")}
+                      </div>
+                    </div>
+                    <MoreHorizontal className="w-5 h-5 text-gray-400" />
+                  </Link>
+                ))}
+              </div>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+