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

feat: adopt Apple-style glassmorphism UI from logistics project
All checks were successful
Build Docker Image / build (push) Successful in 5m41s
Details

Browse Source 
Three-tier glass system (glass-underlay, glass-capsule, glass-chip),
pill-glass capsules with inner shine for header nav pills,
two-layer header backdrop with fade mask, solid white left panel
and juicy rounded-t-3xl bottom sheet for map interactions,
bold/black headings throughout.
This commit is contained in:
Ruslan Bakiev
2026-03-10 11:37:47 +07:00
parent 24398ad918
commit 055d682167
4 changed files with 116 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,19 @@
<template>
<header
class="relative overflow-hidden"
:class="headerClasses"
:style="{ height: `${height}px` }"
>
<div class="absolute top-0 left-0 right-0 pointer-events-none glass-topfade" :style="glassStyle" />
<!-- Single row: Logo + Search + Icons -->
<div
class="relative z-10 flex px-4 lg:px-6 gap-4"
:class="isHeroLayout ? 'items-start pt-4' : 'items-center'"
class="relative z-10 flex px-3 lg:px-4 gap-2"
:class="isHeroLayout ? 'items-start pt-2' : 'items-center'"
:style="rowStyle"
>
<!-- Left: Logo + AI button + Nav links (top aligned) -->
<div class="flex items-center flex-shrink-0 rounded-full glass-bright">
<div class="flex items-center flex-shrink-0 rounded-full pill-glass">
<div class="flex items-center gap-2 px-4 py-2">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2">
<span class="font-bold text-xl" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
<span class="font-black text-xl tracking-tight" :class="useWhiteText ? 'text-white' : 'text-base-content'">Optovia</span>
</NuxtLink>
<button
class="w-8 h-8 rounded-full flex items-center justify-center transition-colors"
@@ -109,7 +107,7 @@
<!-- Client Area tabs -->
<template v-if="isClientArea">
<div class="flex items-center gap-1 rounded-full glass-bright p-1">
<div class="flex items-center gap-1 rounded-full pill-glass p-1">
<!-- BUYER tabs -->
<template v-if="currentRole !== 'SELLER'">
<NuxtLink
@@ -143,7 +141,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 glass-bright overflow-hidden">
<div class="flex items-center w-full rounded-full pill-glass overflow-hidden">
<!-- 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"
@@ -194,7 +192,7 @@
<template v-else>
<!-- Big pill input -->
<div
class="flex items-center gap-3 w-full px-5 py-3 rounded-full glass-bright 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 pill-glass 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" />
@@ -239,7 +237,7 @@
</div>
<!-- Right: Globe + Team + User (top aligned like logo) -->
<div class="flex items-center flex-shrink-0 rounded-full glass-bright">
<div class="flex items-center flex-shrink-0 rounded-full pill-glass">
<div class="w-px h-6 bg-white/20 self-center" />
<div class="flex items-center px-2 py-2">
<!-- Globe (language/currency) dropdown -->
@@ -536,16 +534,8 @@ const centerStyle = computed(() => {
return { marginTop: `${top}px` }
})
// Header background classes
const headerClasses = computed(() => {
if (props.isHomePage && !props.isCollapsed) {
return 'bg-transparent'
}
if (props.isCollapsed) {
return 'bg-transparent backdrop-blur-xl'
}
return 'bg-transparent backdrop-blur-xl'
})
// Header background classes — two-layer glass is handled by .header-glass + .header-glass-backdrop
const headerClasses = computed(() => '')
// Use white text on dark backgrounds (collapsed or home page with animation)
const useWhiteText = computed(() => props.isCollapsed || props.isHomePage)