feat: new catalog layout with all fixed layers
All checks were successful
Build Docker Image / build (push) Successful in 4m38s
All checks were successful
Build Docker Image / build (push) Successful in 4m38s
- Add catalog.vue layout with all layers position:fixed - Layer 1: MainNavigation (fixed top-0, bg-base-200) - Layer 2: SubNavigation (fixed top-16, bg-base-200) - Layer 3: SearchBar (fixed, bg-base-100) - Layer 4: Map (fixed, right side, to bottom) - Update hubs page to use new layout with Teleport - Collapsible header on scroll
This commit is contained in:
Ruslan Bakiev
278
app/layouts/catalog.vue
Normal file
278
app/layouts/catalog.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-base-200">
|
||||
<!-- Layer 1: Collapsed bar (when scrolled) -->
|
||||
<div
|
||||
v-if="isHeaderCollapsed"
|
||||
class="fixed top-0 left-0 right-0 z-50 bg-base-200 border-b border-base-300 h-8 flex items-center px-4 lg:px-6"
|
||||
>
|
||||
<button
|
||||
class="btn btn-ghost btn-xs btn-circle"
|
||||
@click="expandHeader"
|
||||
>
|
||||
<Icon name="lucide:chevron-down" size="16" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Layer 1: MainNavigation (fixed) -->
|
||||
<div
|
||||
v-show="!isHeaderCollapsed"
|
||||
class="fixed top-0 left-0 right-0 z-50"
|
||||
>
|
||||
<MainNavigation
|
||||
class="bg-base-200"
|
||||
: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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Layer 2: SubNavigation (fixed) -->
|
||||
<div
|
||||
v-show="!isHeaderCollapsed"
|
||||
class="fixed top-16 left-0 right-0 z-40 bg-base-200 border-b border-base-300"
|
||||
>
|
||||
<div class="flex items-center gap-1 py-2 px-4 lg:px-6">
|
||||
<!-- Collapse button -->
|
||||
<button
|
||||
class="btn btn-ghost btn-xs btn-circle mr-1 flex-shrink-0"
|
||||
@click="collapseHeader"
|
||||
>
|
||||
<Icon name="lucide:chevron-up" size="16" />
|
||||
</button>
|
||||
|
||||
<NuxtLink
|
||||
v-for="item in subNavItems"
|
||||
:key="item.path"
|
||||
:to="localePath(item.path)"
|
||||
class="px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap text-base-content/70 hover:text-base-content hover:bg-base-300"
|
||||
:class="{ 'text-primary bg-primary/10': isSubNavActive(item.path) }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layer 3: SearchBar (fixed) - teleport target -->
|
||||
<div
|
||||
id="catalog-searchbar"
|
||||
class="fixed left-0 right-0 z-30 bg-base-100 border-b border-base-300"
|
||||
:class="isHeaderCollapsed ? 'top-8' : 'top-[6.75rem]'"
|
||||
/>
|
||||
|
||||
<!-- Layer 4: Map (fixed, right side, to bottom) - teleport target -->
|
||||
<div
|
||||
id="catalog-map"
|
||||
class="fixed right-0 bottom-0 w-3/5 z-20 hidden lg:block"
|
||||
:class="isHeaderCollapsed ? 'top-[5.75rem]' : 'top-[9.75rem]'"
|
||||
/>
|
||||
|
||||
<!-- Content area (left side, with padding for fixed header) -->
|
||||
<div
|
||||
class="lg:w-2/5 min-h-screen"
|
||||
:class="isHeaderCollapsed ? 'pt-[6.75rem]' : 'pt-[10.75rem]'"
|
||||
>
|
||||
<div class="px-4 lg:px-6 py-4">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: Full width content + bottom toggle for map -->
|
||||
<div class="lg:hidden fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
|
||||
<div class="btn-group shadow-lg">
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mobileView === 'list' }"
|
||||
@click="mobileView = 'list'"
|
||||
>
|
||||
{{ $t('common.list') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mobileView === 'map' }"
|
||||
@click="mobileView = 'map'"
|
||||
>
|
||||
{{ $t('common.map') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile map view - teleport target -->
|
||||
<div
|
||||
v-if="mobileView === 'map'"
|
||||
id="catalog-map-mobile"
|
||||
class="lg:hidden fixed inset-0 z-20"
|
||||
:class="isHeaderCollapsed ? 'top-[5.75rem]' : 'top-[9.75rem]'"
|
||||
/>
|
||||
</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 localePath = useLocalePath()
|
||||
const { t } = useI18n()
|
||||
|
||||
// Collapsible header
|
||||
const { isCollapsed, expand, collapse } = useScrollCollapse(50)
|
||||
const isHeaderCollapsed = computed(() => isCollapsed.value)
|
||||
|
||||
const expandHeader = () => expand()
|
||||
const collapseHeader = () => collapse()
|
||||
|
||||
// Mobile view toggle
|
||||
const mobileView = ref<'list' | 'map'>('list')
|
||||
|
||||
// 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 '?'
|
||||
})
|
||||
|
||||
// SubNavigation items for catalog section
|
||||
const subNavItems = computed(() => [
|
||||
{ label: t('cabinetNav.offers'), path: '/catalog/offers' },
|
||||
{ label: t('cabinetNav.suppliers'), path: '/catalog/suppliers' },
|
||||
{ label: t('cabinetNav.hubs'), path: '/catalog/hubs' },
|
||||
])
|
||||
|
||||
const isSubNavActive = (path: string) => {
|
||||
return route.path === localePath(path) || route.path.startsWith(localePath(path) + '/')
|
||||
}
|
||||
|
||||
// Provide collapsed state to children
|
||||
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: '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>
|
||||
Reference in New Issue
Block a user