webapp/app/layouts/topnav.vue

<template>
  <div class="min-h-screen flex flex-col bg-base-300">
    <!-- Fixed Header Container -->
    <div class="fixed top-0 left-0 right-0 z-40" :style="headerContainerStyle">
      <!-- Animated background for home page -->
      <HeroBackground v-if="isHomePage" :collapse-progress="collapseProgress" />

      <!-- MainNavigation - dynamic height on home page -->
      <MainNavigation
        class="relative z-10"
        :height="isHomePage ? heroHeight : 100"
        :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"
        :is-collapsed="isHomePage ? heroIsCollapsed : isCatalogSection"
        :is-home-page="isHomePage"
        @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"
      >
        <!-- Hero content for home page -->
        <template v-if="isHomePage && collapseProgress < 1" #hero>
          <h1
            class="text-3xl lg:text-4xl font-bold text-white mb-4"
            :style="{ opacity: 1 - collapseProgress }"
          >
            {{ $t('hero.tagline', 'Make trade easy') }}
          </h1>
        </template>
      </MainNavigation>

      <!-- 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">
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
const siteUrl = runtimeConfig.public.siteUrl || 'https://optovia.ru/'
const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
const route = useRoute()
const router = useRouter()
const localePath = useLocalePath()
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()

// Catalog search state
const {
  selectMode,
  searchQuery,
  activeTokens,
  availableChips,
  startSelect,
  cancelSelect,
  removeFilter,
  editFilter,
  setQuantity,
  catalogMode,
  setCatalogMode,
  productLabel,
  hubLabel,
  quantity,
  canSearch
} = useCatalogSearch()

// Collapsible header for catalog pages
const { headerOffset, isCollapsed } = useScrollCollapse(100)

// Hero scroll for home page
const {
  heroHeight,
  heroBaseHeight,
  collapseProgress,
  isCollapsed: heroIsCollapsed,
  collapsedHeight
} = useHeroScroll()

// Theme state
const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')

// User data state (shared across layouts)
interface SelectedLocation {
  type: string
  uuid: string
  name: string
  latitude: number
  longitude: number
}

const userData = useState<{
  id?: string
  firstName?: string
  lastName?: string
  avatarId?: string
  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: SelectedLocation | null }
  activeTeamId?: string
  teams?: Array<{ id?: string; name?: string; logtoOrgId?: string }>
} | null>('me', () => null)

const sessionChecked = ref(false)
const userAvatarSvg = useState('user-avatar-svg', () => '')
const lastAvatarSeed = useState('user-avatar-seed', () => '')

const isSeller = computed(() => {
  return userData.value?.activeTeam?.teamType === 'SELLER'
})

const isLoggedIn = computed(() => loggedIn.value || !!userData.value?.id)

const userName = computed(() => {
  return userData.value?.firstName || 'User'
})

const userInitials = computed(() => {
  const first = userData.value?.firstName?.charAt(0) || ''
  const last = userData.value?.lastName?.charAt(0) || ''
  if (first || last) return (first + last).toUpperCase()
  return '?'
})

// Determine current section from route
const currentSection = computed(() => {
  const path = route.path
  if (path.startsWith('/catalog') || path === '/') return 'catalog'
  if (path.includes('/clientarea/offers')) return 'seller'
  if (path.includes('/clientarea/orders') || path.includes('/clientarea/addresses') || path.includes('/clientarea/billing')) return 'orders'
  if (path.includes('/clientarea')) return 'settings'
  return 'catalog'
})

// Home page detection
const isHomePage = computed(() => {
  return route.path === '/' || route.path === '/en' || route.path === '/ru'
})

// Catalog section detection (unified search, no SubNav needed)
const isCatalogSection = computed(() => {
  return route.path.startsWith('/catalog') ||
         route.path.startsWith('/en/catalog') ||
         route.path.startsWith('/ru/catalog')
})

// Collapsible header logic - only for pages with SubNav
const hasSubNav = computed(() => !isHomePage.value && !isCatalogSection.value)
const canCollapse = computed(() => hasSubNav.value)
const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)

// Header container style - transform for SubNav pages
const headerContainerStyle = computed(() => {
  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
const mainStyle = computed(() => {
  if (isCatalogSection.value) return { paddingTop: '0' }
  if (isHomePage.value) return { paddingTop: `${heroBaseHeight.value}px` }
  return { paddingTop: '154px' }
})

// Provide collapsed state to child components (CatalogPage needs it for map positioning)
provide('headerCollapsed', isHeaderCollapsed)

// Avatar generation
const generateUserAvatar = async (seed: string) => {
  if (!seed) return
  try {
    const response = await fetch(`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(seed)}&backgroundColor=b6e3f4,c0aede,d1d4f9`)
    if (response.ok) {
      userAvatarSvg.value = await response.text()
      lastAvatarSeed.value = seed
    }
  } catch (error) {
    console.error('Error generating avatar:', error)
  }
}

const { setActiveTeam } = useActiveTeam()
const { mutate } = useGraphQL()
const locationStore = useLocationStore()

const syncUserUi = async () => {
  if (!userData.value) {
    locationStore.clear()
    return
  }

  if (userData.value.activeTeamId && userData.value.activeTeam?.logtoOrgId) {
    setActiveTeam(userData.value.activeTeamId, userData.value.activeTeam.logtoOrgId)
  }

  const seed = userData.value.avatarId || userData.value.id || userData.value.firstName || 'default'

  if (!userAvatarSvg.value || lastAvatarSeed.value !== seed) {
    userAvatarSvg.value = ''
    await generateUserAvatar(seed)
  }

  locationStore.setFromUserData(userData.value.activeTeam?.selectedLocation)
}

watch(userData, () => {
  void syncUserUi()
}, { immediate: true })

// Check session
await fetchSession().catch(() => {})
sessionChecked.value = true

const switchToTeam = async (team: { id?: string; logtoOrgId?: string; name?: string }) => {
  if (!team?.id) return

  try {
    const { SwitchTeamDocument } = await import('~/composables/graphql/user/teams-generated')
    const result = await mutate(SwitchTeamDocument, { teamId: team.id }, 'user', 'teams')

    if (result.switchTeam?.user && userData.value) {
      userData.value.activeTeam = team as typeof userData.value.activeTeam
      userData.value.activeTeamId = team.id
      if (team.logtoOrgId) {
        setActiveTeam(team.id, team.logtoOrgId)
      }
    }
  } catch (err) {
    console.error('Failed to switch team:', err)
  }
}

const onClickSignOut = () => {
  signOut(siteUrl)
}

const applyTheme = (value: 'cupcake' | 'night') => {
  if (import.meta.client) {
    document.documentElement.setAttribute('data-theme', value)
    localStorage.setItem('theme', value)
  }
}

onMounted(() => {
  const stored = import.meta.client ? localStorage.getItem('theme') : null
  if (stored === 'night' || stored === 'cupcake') {
    theme.value = stored as 'cupcake' | 'night'
  }
  applyTheme(theme.value)
})

watch(theme, (value) => applyTheme(value))

const toggleTheme = () => {
  theme.value = theme.value === 'night' ? 'cupcake' : 'night'
}

// Search handler for Quote mode - triggers search via shared state
const searchTrigger = useState<number>('catalog-search-trigger', () => 0)
const onSearch = () => {
  // Navigate to catalog page if not there
  if (!route.path.includes('/catalog')) {
    router.push({ path: localePath('/catalog'), query: { ...route.query, mode: 'quote' } })
  }
  // Trigger search by incrementing the counter (page watches this)
  searchTrigger.value++
}
</script>