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

Navbar glass style only on catalog/map pages
All checks were successful
Build Docker Image / build (push) Successful in 3m46s
Details

Browse Source 
- Add glassStyle prop to MainNavigation component
- When glassStyle=true: dark transparent bg with white text
- When glassStyle=false: solid bg-base-100 with normal text
- Pass isCatalogSection from layout to toggle glass effect
This commit is contained in:
Ruslan Bakiev
2026-01-24 09:22:25 +07:00
parent 5e55443975
commit 3140226bc3
2 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,32 @@
<template>
<header class="h-[100px] bg-black/30 backdrop-blur-md shadow-lg border-b border-white/10">
<header
class="h-[100px] shadow-lg"
:class="glassStyle ? 'bg-black/30 backdrop-blur-md border-b border-white/10' : 'bg-base-100 border-b border-base-300'"
>
<!-- Single row: Logo + Search + Icons -->
<div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
<!-- 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 text-white">Optovia</span>
<span class="font-bold text-xl" :class="glassStyle ? 'text-white' : 'text-base-content'">Optovia</span>
</NuxtLink>
<!-- Service nav links -->
<nav v-if="showModeToggle" class="flex items-center gap-1">
<button
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="catalogMode === 'explore' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
:class="catalogMode === 'explore'
? (glassStyle ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
: (glassStyle ? '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')"
>
TradeScanner
</button>
<button
class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
:class="catalogMode === 'quote' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
:class="catalogMode === 'quote'
? (glassStyle ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
: (glassStyle ? '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')"
>
Search
@@ -139,13 +146,21 @@
<!-- Right: AI + Globe + Team + User (top aligned) -->
<div class="flex items-start gap-1 flex-shrink-0 pt-3">
<!-- AI Assistant button -->
<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">
<NuxtLink
:to="localePath('/clientarea/ai')"
class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
:class="glassStyle ? '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>
<!-- Globe (language/currency) dropdown -->
<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">
<button
tabindex="0"
class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
:class="glassStyle ? '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>
<div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
@@ -175,7 +190,11 @@
<!-- Team dropdown -->
<template v-if="loggedIn && userData?.teams?.length">
<div class="dropdown dropdown-end">
<button tabindex="0" class="flex items-center gap-1 px-2 py-1 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
<button
tabindex="0"
class="flex items-center gap-1 px-2 py-1 rounded-lg transition-colors"
:class="glassStyle ? '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">
{{ userData?.activeTeam?.name || $t('common.selectTeam') }}
@@ -207,11 +226,17 @@
<template v-if="sessionChecked">
<template v-if="loggedIn">
<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
tabindex="0"
role="button"
class="w-8 h-8 rounded-full overflow-hidden ring-2 transition-all cursor-pointer"
:class="glassStyle ? '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 bg-white/20 flex items-center justify-center text-white font-bold text-xs"
class="w-full h-full flex items-center justify-center font-bold text-xs"
:class="glassStyle ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content'"
>
{{ userInitials }}
</div>
@@ -240,7 +265,11 @@
</div>
</template>
<template v-else>
<button @click="$emit('sign-in')" class="px-4 py-1.5 rounded-full bg-white/20 text-white text-sm font-medium hover:bg-white/30 transition-colors">
<button
@click="$emit('sign-in')"
class="px-4 py-1.5 rounded-full text-sm font-medium transition-colors"
:class="glassStyle ? 'bg-white/20 text-white hover:bg-white/30' : 'bg-primary text-primary-content hover:bg-primary-focus'"
>
{{ $t('auth.login') }}
</button>
</template>
@@ -284,6 +313,8 @@ const props = defineProps<{
quantity?: string
canSearch?: boolean
showModeToggle?: boolean
// Glass style (transparent) for map pages
glassStyle?: boolean
}>()
defineEmits([