Merge pull request 'fix1107' (#21) from fix1107 into main

Reviewed-on: #21

src/components/Layout.tsx

@@ -33,7 +33,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
       </header>
       
       <main className="pt-[62px] md:pt-[63px]">
-      <IndexTopMenuNav />
+      <IndexTopMenuNav isIndexPage={router.pathname === '/'} />
         {children}</main>
       <MobileMenuBottomSection onOpenAuthModal={() => setAuthModalOpen(true)} />
     </>

src/components/index/IndexTopMenuNav.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
 
-const IndexTopMenuNav = () => (
+const IndexTopMenuNav = ({ isIndexPage = false }: { isIndexPage?: boolean }) => (
-  <section className="topmenub">
+  <section className={`topmenub${!isIndexPage ? ' topmenub-white' : ''}`} style={!isIndexPage ? { background: '#fff' } : undefined}>
     <div className="w-layout-blockcontainer tb nav w-container">
       <div className="w-layout-hflex flex-block-107">
         <Link href="/about" className="link-block-8 w-inline-block">

src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber]/brands.tsx

@@ -11,11 +11,15 @@ import MetaTags from '@/components/MetaTags';
 import { getMetaByPath } from '@/lib/meta-config';
 
 const InfoBrandSelection = ({ 
+  brand,
   brandName, 
+  vehicleId,
   oemNumber, 
   detailName 
 }: { 
+  brand: string;
   brandName: string; 
+  vehicleId: string;
   oemNumber: string; 
   detailName?: string;
 }) => (
@@ -27,20 +31,22 @@ const InfoBrandSelection = ({
             <div>Главная</div>
           </a>
           <div className="text-block-3">→</div>
-          <a href="#" className="link-block-2 w-inline-block">
+          <a href="#" className="link-block w-inline-block">
             <div>Каталог</div>
           </a>
           <div className="text-block-3">→</div>
-          <div>{brandName}</div>
+          <a href={`/vehicle-search/${brand}/${vehicleId}`} className="link-block w-inline-block">
+            <div>{brandName}</div>
+          </a>
           <div className="text-block-3">→</div>
-          <div>Деталь {oemNumber}</div>
+          <a href="#" className="link-block-2 w-inline-block">
-          <div className="text-block-3">→</div>
+            <div>Деталь {oemNumber}</div>
-          <div>Выбор производителя</div>
+          </a>
         </div>
-        <div className="w-layout-hflex flex-block-8">
+        <div className="link-block w-inline-block">
-          <div className="w-layout-hflex flex-block-10">
+          
-            <h1 className="heading">Выберите производителя для {oemNumber}</h1>
+            <div className="heading">Выберите производителя для {oemNumber}</div>
-          </div>
+          
         </div>
       </div>
     </div>
@@ -123,15 +129,17 @@ const BrandSelectionPage = () => {
     <>
       <MetaTags {...metaData} />
       <InfoBrandSelection 
+        brand={String(brand)}
         brandName={catalogInfo?.name || String(brand)} 
+        vehicleId={String(vehicleId)}
         oemNumber={String(oemNumber)}
         detailName={String(detailName || '')}
       />
       <div className="page-wrapper bg-[#F5F8FB] min-h-screen">
-        <div className="w-full max-w-[1580px] mx-auto px-8 max-md:px-5 pt-10 pb-16">
+        <div className="mx-auto px-8 max-md:px-5 pt-10 pb-16 ">
 
           {/* Кнопка назад */}
-          <div className="mb-6">
+          {/* <div className="mb-6">
             <button
               onClick={handleBack}
               className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
@@ -141,7 +149,7 @@ const BrandSelectionPage = () => {
               </svg>
               Назад к деталям
             </button>
-          </div>
+          </div> */}
 
           {/* Обработка ошибок */}
           {hasError && !loading && (
@@ -187,40 +195,40 @@ const BrandSelectionPage = () => {
                   </p>
                 </div>
               ) : brands.length > 0 && (
-                <div className="bg-white rounded-2xl shadow p-10">
+                  <div className="bg-white rounded-2xl shadow p-10 w-full max-w-[1580px] mx-auto min-h-[500px]">
-                  <div className="border-b border-gray-200 pb-4">
+                    {/* <div className="border-b border-gray-200 pb-4">
-                    <h2 className="text-xl font-semibold text-gray-900">
+                      <h2 className="text-xl font-semibold text-gray-900">
-                      Выбор производителя для артикула: {oemNumber}
+                        Выбор производителя для артикула: {oemNumber}
-                    </h2>
+                      </h2>
-                    <p className="text-sm text-gray-600 mt-1">
+                      <p className="text-sm text-gray-600 mt-1">
-                      {detailName && <span>Деталь: {detailName} • </span>}
+                        {detailName && <span>Деталь: {detailName} • </span>}
-                      Найдено производителей: <span className="font-medium">{brands.length}</span>
+                        Найдено производителей: <span className="font-medium">{brands.length}</span>
-                    </p>
+                      </p>
+                    </div> */}
+                    <div className="divide-y divide-gray-200">
+                      {brands.map((brandItem: any, index: number) => (
+                        <div key={index}>
+                          <button
+                            onClick={() => handleBrandSelect(brandItem.brand)}
+                            className="w-full text-left p-4 hover:bg-gray-50 transition-colors block group"
+                          >
+                            <div className="flex w-full items-center gap-2">
+                              <div className="w-1/5 max-md:w-1/3 font-bold text-left truncate" style={{ color: 'rgb(77, 180, 94)' }}>
+                                {brandItem.brand}
+                              </div>
+                              <div className="w-1/5 max-md:text-center max-md:w-1/3 font-bold text-left truncate group-hover:text-[#EC1C24] transition-colors">
+                                {oemNumber}
+                              </div>
+                              <div className="w-3/5 max-md:w-1/3 text-left truncate">
+                                {brandItem.name && brandItem.name !== brandItem.brand ? brandItem.name : detailName || 'Запчасть'}
+                              </div>
+                            </div>
+                          </button>
+                        </div>
+                      ))}
+                    </div>
                   </div>
-                  <div className="divide-y divide-gray-200">
+                )}
-                    {brands.map((brandItem: any, index: number) => (
-                      <div key={index}>
-                        <button
-                          onClick={() => handleBrandSelect(brandItem.brand)}
-                          className="w-full text-left p-4 hover:bg-gray-50 transition-colors block group"
-                        >
-                          <div className="flex w-full items-center gap-2">
-                            <div className="w-1/5 max-md:w-1/3 font-bold text-left truncate" style={{ color: 'rgb(77, 180, 94)' }}>
-                              {brandItem.brand}
-                            </div>
-                            <div className="w-1/5 max-md:text-center max-md:w-1/3 font-bold text-left truncate group-hover:text-[#EC1C24] transition-colors">
-                              {oemNumber}
-                            </div>
-                            <div className="w-3/5 max-md:w-1/3 text-left truncate">
-                              {brandItem.name && brandItem.name !== brandItem.brand ? brandItem.name : detailName || 'Запчасть'}
-                            </div>
-                          </div>
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
             </div>
           )}
         </div>

src/styles/my.css

@@ -614,6 +614,16 @@ body {
   font-family: Onest, sans-serif;
 }
 
+.heading{
+  font-size: 28px;
+}
+
+
+a.link-block.w-inline-block,
+a.link-block-2.w-inline-block  {
+  font-size: 12px;
+}
+
 
 .menu-button.w--open {
   z-index: 2000;
@@ -891,6 +901,22 @@ body {
   }
 }
 
+.topmenub[style*='#fff'] .link-block-8 {
+  border: 1px solid #E6EDF6 !important;
+
+  transition: border-color 0.2s;
+}
+
+.topmenub-white .link-block-8 {
+  border: 1px solid #E6EDF6 !important;
+  border-radius: 8px;
+  transition: border-color 0.2s;
+}
+
+.container.info {
+  padding-top: 5px !important;
+  padding-bottom: 20px !important;
+}
 
 .carousel-row {
   display: flex;