Add topnav layout with MainNavigation, SubNavigation, GlobalSearchBar, SplitLayout

app/layouts/topnav.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="min-h-screen flex flex-col bg-base-200">
+    <!-- Main Navigation (Logo + Tabs + User) -->
+    <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"
+      @toggle-theme="toggleTheme"
+      @sign-out="onClickSignOut"
+      @sign-in="signIn()"
+      @switch-team="switchToTeam"
+    />
+
+    <!-- Sub Navigation (section-specific tabs) -->
+    <SubNavigation :section="currentSection" />
+
+    <!-- Global Search Bar -->
+    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />
+
+    <!-- Page content -->
+    <main class="flex-1 flex flex-col min-h-0">
+      <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()
+
+// Theme state
+const theme = useState<'default' | 'night'>('theme', () => 'default')
+
+// User data state (shared across layouts)
+const userData = useState<{
+  id?: string
+  firstName?: string
+  lastName?: string
+  avatarId?: string
+  activeTeam?: { name?: string; teamType?: string; logtoOrgId?: string; selectedLocation?: any }
+  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'
+})
+
+// Show search bar on catalog pages
+const showSearch = computed(() => {
+  return currentSection.value === 'catalog'
+})
+
+// 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: 'default' | 'night') => {
+  if (import.meta.client) {
+    if (value === 'default') {
+      document.documentElement.removeAttribute('data-theme')
+    } else {
+      document.documentElement.setAttribute('data-theme', value)
+    }
+    localStorage.setItem('theme', value)
+  }
+}
+
+onMounted(() => {
+  const stored = import.meta.client ? localStorage.getItem('theme') : null
+  if (stored === 'night' || stored === 'default') {
+    theme.value = stored
+  }
+  applyTheme(theme.value)
+})
+
+watch(theme, (value) => applyTheme(value))
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'night' ? 'default' : 'night'
+}
+</script>