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

Refine top bar glass layout
All checks were successful
Build Docker Image / build (push) Successful in 4m38s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-06 15:40:33 +07:00
parent 4585d30d53
commit ca7c6fa8a5
1 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,14 @@
<template>
<header
class="shadow-lg"
class="shadow-lg relative overflow-hidden"
:class="headerClasses"
:style="{ height: `${height}px` }"
>
<div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-white/35 via-white/15 to-transparent" />
<!-- Single row: Logo + Search + Icons -->
<div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
<div class="relative z-10 flex items-center 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">
<div class="flex items-center gap-6 flex-shrink-0 px-4 py-3 rounded-2xl border border-white/20 bg-white/15 backdrop-blur-md shadow-lg">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2">
<span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
</NuxtLink>
@@ -83,7 +84,7 @@
<!-- Client Area tabs -->
<template v-if="isClientArea">
<div class="flex items-center gap-1 rounded-full border border-white/20 bg-white/80 backdrop-blur-md shadow-lg p-1">
<div class="flex items-center gap-1 rounded-full border border-white/35 bg-white/75 backdrop-blur-md shadow-lg p-1">
<!-- BUYER tabs -->
<template v-if="currentRole !== 'SELLER'">
<NuxtLink
@@ -117,7 +118,7 @@
<!-- Quote mode: Simple segmented input with search inside (white glass) -->
<template v-else-if="catalogMode === 'quote'">
<div class="flex items-center w-full rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
<div class="flex items-center w-full rounded-full border border-white/50 bg-white/85 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
<!-- Product segment -->
<button
class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@@ -166,7 +167,7 @@
<template v-else>
<!-- Big pill input -->
<div
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/50 bg-white/85 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
@click="focusInput"
>
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
@@ -211,7 +212,7 @@
</div>
<!-- Right: AI + Globe + Team + User (top aligned like logo) -->
<div class="flex items-start gap-1 flex-shrink-0 pt-4">
<div class="flex items-center gap-1 flex-shrink-0 px-3 py-2 rounded-2xl border border-white/20 bg-white/15 backdrop-blur-md shadow-lg">
<!-- AI Assistant button -->
<NuxtLink
:to="localePath('/clientarea/ai')"
@@ -480,19 +481,15 @@ const getTokenIcon = (type: string) => {
// 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'
return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
}
// White on other pages
return 'bg-base-100 border-b border-base-300'
if (props.isCollapsed) {
return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
}
return 'bg-transparent border-b border-white/10 backdrop-blur-lg'
})
// Use white text on dark backgrounds (collapsed or home page with animation)
const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)
</script>