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

UI: Glass effect everywhere, fix nav height, simplify quote form
All checks were successful
Build Docker Image / build (push) Successful in 3m9s
Details

Browse Source 
- Fixed nav height (h-20), logo and user menu aligned to top
- Quote form: removed colored circles, simple labels, search button inside pill
- Panels closer to nav (top-4 instead of top-20)
- Glass effect on all overlays (bg-base-100/70 backdrop-blur-md)
- Selection panel sticky headers with glass effect
This commit is contained in:
Ruslan Bakiev
2026-01-23 11:36:20 +07:00
parent f31ceacdee
commit 999658aee1
3 changed files with 47 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,16 @@
<template>
<header class="bg-base-100 shadow-md">
<header class="h-20 bg-base-100/80 backdrop-blur-md shadow-md">
<!-- Single row: Logo + Search + Icons -->
<div class="flex items-start px-4 lg:px-6 py-3 gap-4">
<!-- Left: Logo -->
<div class="flex items-center flex-shrink-0 py-2.5">
<div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
<!-- Left: Logo (top aligned) -->
<div class="flex items-start flex-shrink-0 pt-4">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2">
<span class="font-bold text-xl">Optovia</span>
</NuxtLink>
</div>
<!-- Mode toggle (between Logo and Search) -->
<div v-if="showModeToggle" class="flex items-center flex-shrink-0 py-2.5">
<!-- Mode toggle (between Logo and Search, top aligned) -->
<div v-if="showModeToggle" class="flex items-start flex-shrink-0 pt-3.5">
<div class="join">
<button
class="btn btn-sm join-item"
@@ -29,59 +29,42 @@
</div>
</div>
<!-- Center: Search input (transforms based on mode) -->
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 min-h-[72px] justify-center">
<!-- Quote mode: Segmented input like Airbnb -->
<!-- Center: Search input (vertically centered) -->
<div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center">
<!-- Quote mode: Simple segmented input with search inside -->
<template v-if="catalogMode === 'quote'">
<div class="flex items-center gap-3 w-full">
<div class="flex items-center flex-1 rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
<!-- Product segment -->
<button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@click="$emit('edit-token', 'product')"
>
<div class="flex items-center gap-1.5 text-xs text-base-content/60">
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.product }">
<Icon name="lucide:shopping-bag" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.product') }}
</div>
<div class="font-medium truncate mt-0.5">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
</button>
<!-- Hub segment -->
<button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'hub')"
>
<div class="flex items-center gap-1.5 text-xs text-base-content/60">
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" :style="{ backgroundColor: entityColors.hub }">
<Icon name="lucide:warehouse" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.hub') }}
</div>
<div class="font-medium truncate mt-0.5">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
</button>
<!-- Quantity segment -->
<button
class="flex-1 px-4 py-2.5 text-left hover:bg-base-200/50 rounded-r-full transition-colors min-w-0"
@click="$emit('edit-token', 'quantity')"
>
<div class="flex items-center gap-1.5 text-xs text-base-content/60">
<span class="w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 bg-base-content/30">
<Icon name="lucide:scale" size="10" class="text-white" />
</span>
{{ $t('catalog.quote.quantity') }}
</div>
<div class="font-medium mt-0.5">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
</button>
</div>
<!-- Search button -->
<div class="flex items-center w-full rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
<!-- Product segment -->
<button
class="btn btn-primary btn-circle shadow-lg"
class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
@click="$emit('edit-token', 'product')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
<div class="font-medium truncate">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
</button>
<!-- Hub segment -->
<button
class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'hub')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
<div class="font-medium truncate">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
</button>
<!-- Quantity segment -->
<button
class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
@click="$emit('edit-token', 'quantity')"
>
<div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
<div class="font-medium">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
</button>
<!-- Search button inside -->
<button
class="btn btn-primary btn-circle m-1"
:disabled="!canSearch"
@click="$emit('search')"
>
<Icon name="lucide:search" size="20" />
<Icon name="lucide:search" size="18" />
</button>
</div>
</template>
@@ -155,8 +138,8 @@
</template>
</div>
<!-- Right: AI + Globe + Team + User -->
<div class="flex items-center gap-1 flex-shrink-0 py-2.5">
<!-- 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="btn btn-ghost btn-circle btn-sm">
<Icon name="lucide:bot" size="18" />