optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hero animation: transparent navbar on home page, glass on collapse
Some checks failed
Build Docker Image / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-27 10:19:00 +07:00
parent 3f823b2abc
commit 65250f1342
2 changed files with 33 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/components/navigation/MainNavigation.vue
View File

@@ -1,7 +1,7 @@
<template>
<header
class="shadow-lg"
:class="isCollapsed ? 'bg-black/30 backdrop-blur-md border-b border-white/10' : 'bg-base-100 border-b border-base-300'"
:class="headerClasses"
:style="{ height: `${height}px` }"
>
<!-- Single row: Logo + Search + Icons -->
@@ -9,7 +9,7 @@
<!-- Left: Logo + Nav links (top aligned) -->
<div class="flex items-start gap-6 flex-shrink-0 pt-4">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2">
<span class="font-bold text-xl" :class="isCollapsed ? 'text-white' : 'text-base-content'">Optovia</span>
<span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
</NuxtLink>
<!-- Service nav links -->
@@ -17,8 +17,8 @@
<button
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="showActiveMode && catalogMode === 'explore'
? (isCollapsed ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
: (isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
: (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
@click="$emit('set-catalog-mode', 'explore')"
>
{{ $t('catalog.modes.explore') }}
@@ -26,8 +26,8 @@
<button
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="showActiveMode && catalogMode === 'quote'
? (isCollapsed ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
: (isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
: (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
@click="$emit('set-catalog-mode', 'quote')"
>
{{ $t('catalog.modes.quote') }}
@@ -141,7 +141,7 @@
<NuxtLink
:to="localePath('/clientarea/ai')"
class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
:class="isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
:class="useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
>
<Icon name="lucide:bot" size="18" />
</NuxtLink>
@@ -151,7 +151,7 @@
<button
tabindex="0"
class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
:class="isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
:class="useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
>
<Icon name="lucide:globe" size="18" />
</button>
@@ -185,7 +185,7 @@
<button
tabindex="0"
class="h-8 flex items-center gap-1 px-2 rounded-lg transition-colors"
:class="isCollapsed ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
:class="useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200'"
>
<Icon name="lucide:building-2" size="16" />
<span class="hidden lg:inline max-w-24 truncate text-xs">
@@ -222,13 +222,13 @@
tabindex="0"
role="button"
class="w-8 h-8 rounded-full overflow-hidden ring-2 transition-all cursor-pointer"
:class="isCollapsed ? 'ring-white/20 hover:ring-white/40' : 'ring-base-300 hover:ring-primary'"
:class="useWhiteText ? 'ring-white/20 hover:ring-white/40' : 'ring-base-300 hover:ring-primary'"
>
<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"
:class="isCollapsed ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content'"
:class="useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content'"
>
{{ userInitials }}
</div>
@@ -260,7 +260,7 @@
<button
@click="$emit('sign-in')"
class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors"
:class="isCollapsed ? 'bg-white/20 text-white hover:bg-white/30' : 'bg-primary text-primary-content hover:bg-primary-focus'"
:class="useWhiteText ? 'bg-white/20 text-white hover:bg-white/30' : 'bg-primary text-primary-content hover:bg-primary-focus'"
>
{{ $t('auth.login') }}
</button>
@@ -308,6 +308,8 @@ const props = withDefaults(defineProps<{
showActiveMode?: boolean // Whether to show active state on mode toggle
// Glass style applied when header is collapsed
isCollapsed?: boolean
// Home page flag for transparent background
isHomePage?: boolean
// Dynamic height for hero effect
height?: number
}>(), {
@@ -386,5 +388,22 @@ const getTokenIcon = (type: string) => {
}
return icons[type] || 'lucide:tag'
}
// Header background classes
const headerClasses = computed(() => {
if (props.isCollapsed) {
// Glass style when collapsed
return 'bg-black/30 backdrop-blur-md border-b border-white/10'
}
if (props.isHomePage) {
// Transparent on home page (animation visible behind)
return 'bg-transparent'
}
// White on other pages
return 'bg-base-100 border-b border-base-300'
})
// Use white text on dark backgrounds (collapsed or home page with animation)
const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
</script>

3
app/layouts/topnav.vue
View File

@@ -28,7 +28,8 @@
:can-search="canSearch"
:show-mode-toggle="true"
:show-active-mode="isCatalogSection"
:is-collapsed="isHomePage || isCatalogSection"
:is-collapsed="isHomePage ? heroIsCollapsed : isCatalogSection"
:is-home-page="isHomePage"
@toggle-theme="toggleTheme"
@set-catalog-mode="setCatalogMode"
@sign-out="onClickSignOut"