From 53a51ed80c41aee98f8829a9508090d9feeebeb2 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <ruslanbakiev@dsrptlab.com>
Date: Mon, 26 Jan 2026 17:14:40 +0700
Subject: [PATCH] Simplify: use same MainNavigation everywhere, just taller
 container on home

---
 app/layouts/topnav.vue | 273 +++++++++--------------------------------
 1 file changed, 57 insertions(+), 216 deletions(-)

diff --git a/app/layouts/topnav.vue b/app/layouts/topnav.vue
index 51702e9..5841687 100644
--- a/app/layouts/topnav.vue
+++ b/app/layouts/topnav.vue
@@ -1,200 +1,56 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-300">
-    <!-- Home Page Hero Header (full screen, dark background, collapses on scroll) -->
-    <template v-if="isHomePage">
-      <div
-        class="fixed top-0 left-0 right-0 z-40 flex flex-col justify-center transition-all duration-100 ease-out"
-        :style="heroStyle"
-      >
-        <!-- Dark gradient background -->
+    <!-- Fixed Header Container -->
+    <div class="fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
+      <!-- Dark gradient background for home page -->
+      <template v-if="isHomePage">
         <div class="absolute inset-0 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900" />
         <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent" />
+      </template>
 
-        <!-- Content wrapper (centers content in the hero area) -->
-        <div class="relative z-10 flex flex-col items-center justify-center flex-1 px-4">
-          <!-- Logo and nav at top - opacity fades linearly with scroll -->
-          <div
-            class="absolute top-0 left-0 right-0 flex items-center justify-between px-4 lg:px-6"
-            :style="{ height: '100px', opacity: 1 - collapseProgress }"
-          >
-            <!-- Left: Logo + Nav links -->
-            <div class="flex items-center gap-6 pt-4">
-              <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
-                <span class="font-bold text-xl text-white">Optovia</span>
-              </NuxtLink>
-              <nav class="flex items-center gap-1">
-                <button
-                  class="px-3 py-1 text-sm font-medium rounded-lg transition-colors text-white/70 hover:text-white hover:bg-white/10"
-                  @click="setCatalogMode('explore')"
-                >
-                  {{ $t('catalog.modes.explore') }}
-                </button>
-                <button
-                  class="px-3 py-1 text-sm font-medium rounded-lg transition-colors text-white/70 hover:text-white hover:bg-white/10"
-                  @click="setCatalogMode('quote')"
-                >
-                  {{ $t('catalog.modes.quote') }}
-                </button>
-              </nav>
-            </div>
+      <!-- MainNavigation - same everywhere, just glass-style on home/catalog -->
+      <MainNavigation
+        class="relative z-10"
+        :session-checked="sessionChecked"
+        :logged-in="isLoggedIn"
+        :user-avatar-svg="userAvatarSvg"
+        :user-name="userName"
+        :user-initials="userInitials"
+        :theme="theme"
+        :user-data="userData"
+        :is-seller="isSeller"
+        :active-tokens="activeTokens"
+        :available-chips="availableChips"
+        :select-mode="selectMode"
+        :search-query="searchQuery"
+        :catalog-mode="catalogMode"
+        :product-label="productLabel ?? undefined"
+        :hub-label="hubLabel ?? undefined"
+        :quantity="quantity"
+        :can-search="canSearch"
+        :show-mode-toggle="true"
+        :show-active-mode="isCatalogSection"
+        :glass-style="isHomePage || isCatalogSection"
+        @toggle-theme="toggleTheme"
+        @set-catalog-mode="setCatalogMode"
+        @sign-out="onClickSignOut"
+        @sign-in="signIn()"
+        @switch-team="switchToTeam"
+        @start-select="startSelect"
+        @cancel-select="cancelSelect"
+        @edit-token="editFilter"
+        @remove-token="removeFilter"
+        @update:search-query="searchQuery = $event"
+        @update-quantity="setQuantity"
+        @search="onSearch"
+      />
 
-            <!-- Right: Icons (when expanded) -->
-            <div class="flex items-center gap-1 pt-4">
-              <NuxtLink
-                :to="localePath('/clientarea/ai')"
-                class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors"
-              >
-                <Icon name="lucide:bot" size="18" />
-              </NuxtLink>
-              <div class="dropdown dropdown-end">
-                <button
-                  tabindex="0"
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors"
-                >
-                  <Icon name="lucide:globe" size="18" />
-                </button>
-                <div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
-                  <div class="font-semibold mb-2">{{ $t('common.language') }}</div>
-                  <div class="flex gap-2 mb-4">
-                    <NuxtLink
-                      v-for="loc in locales"
-                      :key="loc.code"
-                      :to="switchLocalePath(loc.code)"
-                      class="btn btn-sm"
-                      :class="locale === loc.code ? 'btn-primary' : 'btn-ghost'"
-                    >
-                      {{ loc.code.toUpperCase() }}
-                    </NuxtLink>
-                  </div>
-                  <div class="font-semibold mb-2">{{ $t('common.theme') }}</div>
-                  <button class="btn btn-sm btn-ghost w-full justify-start" @click="toggleTheme">
-                    <Icon :name="theme === 'night' ? 'lucide:sun' : 'lucide:moon'" size="16" />
-                    {{ theme === 'night' ? $t('common.theme_light') : $t('common.theme_dark') }}
-                  </button>
-                </div>
-              </div>
-              <template v-if="sessionChecked">
-                <template v-if="isLoggedIn">
-                  <div class="dropdown dropdown-end">
-                    <div
-                      tabindex="0"
-                      role="button"
-                      class="w-8 h-8 rounded-full overflow-hidden ring-2 ring-white/20 hover:ring-white/40 transition-all cursor-pointer"
-                    >
-                      <div v-if="userAvatarSvg" v-html="userAvatarSvg" class="w-full h-full" />
-                      <div v-else class="w-full h-full flex items-center justify-center font-bold text-xs bg-white/20 text-white">
-                        {{ userInitials }}
-                      </div>
-                    </div>
-                    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg border border-base-300">
-                      <li class="menu-title"><span>{{ userName }}</span></li>
-                      <li>
-                        <NuxtLink :to="localePath('/clientarea/profile')">
-                          <Icon name="lucide:user" size="16" />
-                          {{ $t('dashboard.profile') }}
-                        </NuxtLink>
-                      </li>
-                      <div class="divider my-1"></div>
-                      <li>
-                        <a @click="onClickSignOut" class="text-error">
-                          <Icon name="lucide:log-out" size="16" />
-                          {{ $t('auth.logout') }}
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                </template>
-                <template v-else>
-                  <button
-                    @click="signIn()"
-                    class="px-4 py-1.5 rounded-full text-sm font-medium bg-white/20 text-white hover:bg-white/30 transition-colors"
-                  >
-                    {{ $t('auth.login') }}
-                  </button>
-                </template>
-              </template>
-            </div>
-          </div>
-
-          <!-- Centered search area - linear transform with scroll -->
-          <div class="w-full max-w-2xl">
-            <!-- Big title - fades and moves up linearly -->
-            <div
-              class="text-center mb-8"
-              :style="{ opacity: 1 - collapseProgress, transform: `translateY(${-collapseProgress * 20}px)` }"
-            >
-              <h1 class="text-4xl lg:text-5xl font-bold text-white mb-3">
-                {{ $t('hero.title', 'Оптовая торговля') }}
-              </h1>
-              <p class="text-lg text-white/70">
-                {{ $t('hero.subtitle', 'Найдите лучших поставщиков и товары') }}
-              </p>
-            </div>
-
-            <!-- Search input (always visible, centered) -->
-            <div
-              class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/90 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 cursor-text"
-              @click="focusHeroInput"
-            >
-              <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
-              <input
-                ref="heroInputRef"
-                v-model="searchQuery"
-                type="text"
-                :placeholder="$t('catalog.search.placeholder')"
-                class="flex-1 min-w-32 bg-transparent outline-none text-lg text-base-content placeholder:text-base-content/50"
-                @keyup.enter="navigateToCatalog"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <!-- Regular Fixed Header (for non-home pages) -->
-    <template v-else>
-      <div class="fixed top-0 left-0 right-0 z-40" :style="headerStyle">
-        <MainNavigation
-          :session-checked="sessionChecked"
-          :logged-in="isLoggedIn"
-          :user-avatar-svg="userAvatarSvg"
-          :user-name="userName"
-          :user-initials="userInitials"
-          :theme="theme"
-          :user-data="userData"
-          :is-seller="isSeller"
-          :active-tokens="activeTokens"
-          :available-chips="availableChips"
-          :select-mode="selectMode"
-          :search-query="searchQuery"
-          :catalog-mode="catalogMode"
-          :product-label="productLabel ?? undefined"
-          :hub-label="hubLabel ?? undefined"
-          :quantity="quantity"
-          :can-search="canSearch"
-          :show-mode-toggle="true"
-          :show-active-mode="isCatalogSection"
-          :glass-style="isCatalogSection"
-          @toggle-theme="toggleTheme"
-          @set-catalog-mode="setCatalogMode"
-          @sign-out="onClickSignOut"
-          @sign-in="signIn()"
-          @switch-team="switchToTeam"
-          @start-select="startSelect"
-          @cancel-select="cancelSelect"
-          @edit-token="editFilter"
-          @remove-token="removeFilter"
-          @update:search-query="searchQuery = $event"
-          @update-quantity="setQuantity"
-          @search="onSearch"
-        />
-
-        <SubNavigation
-          v-if="!isCatalogSection"
-          :section="currentSection"
-        />
-      </div>
-    </template>
+      <!-- Sub Navigation (section-specific tabs) - only for non-catalog/non-home sections -->
+      <SubNavigation
+        v-if="!isHomePage && !isCatalogSection"
+        :section="currentSection"
+      />
+    </div>
 
     <!-- Page content - padding-top compensates for fixed header -->
     <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6" :style="mainStyle">
@@ -244,17 +100,6 @@ const {
   collapsedHeight
 } = useHeroScroll()
 
-// Hero input ref
-const heroInputRef = ref<HTMLInputElement>()
-const focusHeroInput = () => {
-  heroInputRef.value?.focus()
-}
-
-// Navigate to catalog on enter
-const navigateToCatalog = () => {
-  router.push(localePath('/catalog'))
-}
-
 // Theme state
 const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')
 
@@ -317,24 +162,20 @@ const hasSubNav = computed(() => !isHomePage.value && !isCatalogSection.value)
 const canCollapse = computed(() => hasSubNav.value)
 const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)
 
-// Header style - transform for smooth slide animation (only when SubNav present)
-const headerStyle = computed(() => {
-  if (!hasSubNav.value) return {}
-  return { transform: `translateY(${headerOffset.value}px)` }
-})
-
-// Hero style for home page - height changes on scroll
-const heroStyle = computed(() => {
-  return {
-    height: `${heroHeight.value}px`,
-    minHeight: `${collapsedHeight}px`
+// Header container style - dynamic height for home page, transform for SubNav pages
+const headerContainerStyle = computed(() => {
+  if (isHomePage.value) {
+    // Home page: height changes from heroHeight to 100px on scroll
+    return { height: `${heroHeight.value}px` }
   }
+  if (hasSubNav.value) {
+    // SubNav pages: slide up on scroll
+    return { transform: `translateY(${headerOffset.value}px)` }
+  }
+  return {}
 })
 
 // Main content padding-top to compensate for fixed header
-// For catalog section: no padding - map extends behind header
-// Home page: FIXED at base height (not dynamic!) so content doesn't move with scroll
-// 154px = MainNav + SubNav (orders, seller, settings)
 const mainStyle = computed(() => {
   if (isCatalogSection.value) return { paddingTop: '0' }
   if (isHomePage.value) return { paddingTop: `${heroBaseHeight.value}px` }