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

Fix header: remove selectMode indicator, align logo and icons
Some checks failed
Build Docker Image / build (push) Has been cancelled
Details

Browse Source 
- Remove 'Товар:' badge during selection - tags appear only after selection
- Align logo and icons vertically with input (h-12)
- Simplify search input styling
This commit is contained in:
Ruslan Bakiev
2026-01-22 11:49:21 +07:00
parent 3c6ae03c30
commit a8612c20b5
1 changed files with 56 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,19 @@
<template>
<header class="bg-base-100 shadow-md">
<!-- Single row: Logo + Search Block + Icons -->
<div class="flex items-center px-4 lg:px-6 py-3 gap-4">
<!-- Left: Logo -->
<div class="flex items-center flex-shrink-0">
<!-- Single row: Logo + Search + Icons -->
<div class="flex items-start px-4 lg:px-6 py-3 gap-4">
<!-- Left: Logo (centered with input) -->
<div class="flex items-center flex-shrink-0 h-12">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2">
<span class="font-bold text-xl">Optovia</span>
</NuxtLink>
</div>
<!-- Center: Search block (input + chips together) -->
<div class="flex-1 flex justify-center px-4 max-w-3xl mx-auto">
<!-- Center: Search input + chips -->
<div class="flex-1 flex flex-col items-center px-4 max-w-2xl mx-auto gap-2">
<!-- Big rounded input -->
<div
class="w-full bg-base-200/50 rounded-2xl p-4 border border-base-300 shadow-sm hover:shadow-md transition-all"
>
<!-- Input row with tokens -->
<div
class="flex items-center gap-3 px-4 py-3 bg-base-100 rounded-xl border border-base-300 cursor-text"
class="flex items-center gap-3 w-full px-5 py-3 border border-base-300 rounded-full bg-base-100 shadow-md hover: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" />
@@ -41,21 +38,6 @@
</button>
</div>
<!-- Active selection mode indicator -->
<div
v-if="selectMode"
class="badge badge-lg badge-outline badge-primary gap-1.5 flex-shrink-0"
>
<Icon :name="selectModeIcon" size="14" />
{{ selectModeLabel }}:
<button
class="hover:text-error"
@click.stop="$emit('cancel-select')"
>
<Icon name="lucide:x" size="14" />
</button>
</div>
<!-- Search input -->
<input
ref="inputRef"
@@ -68,26 +50,25 @@
</div>
</div>
<!-- Chips row (inside same block) -->
<!-- Chips below input -->
<div
v-if="availableChips.length > 0"
class="flex items-center justify-center gap-2 mt-3"
class="flex items-center justify-center gap-2"
>
<button
v-for="chip in availableChips"
:key="chip.type"
class="btn btn-sm btn-ghost gap-1.5"
class="btn btn-xs btn-ghost gap-1"
@click="$emit('start-select', chip.type)"
>
<Icon name="lucide:plus" size="14" />
<Icon name="lucide:plus" size="12" />
{{ chip.label }}
</button>
</div>
</div>
</div>
<!-- Right: AI + Globe + Team + User -->
<div class="flex items-center gap-1 flex-shrink-0">
<!-- Right: AI + Globe + Team + User (centered with input) -->
<div class="flex items-center gap-1 flex-shrink-0 h-12">
<!-- AI Assistant button -->
<NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
<Icon name="lucide:bot" size="18" />