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

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

@@ -1,93 +1,74 @@
<template> <template>
<header class="bg-base-100 shadow-md"> <header class="bg-base-100 shadow-md">
<!-- Single row: Logo + Search Block + Icons --> <!-- Single row: Logo + Search + Icons -->
<div class="flex items-center px-4 lg:px-6 py-3 gap-4"> <div class="flex items-start px-4 lg:px-6 py-3 gap-4">
<!-- Left: Logo --> <!-- Left: Logo (centered with input) -->
<div class="flex items-center flex-shrink-0"> <div class="flex items-center flex-shrink-0 h-12">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2"> <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
<span class="font-bold text-xl">Optovia</span> <span class="font-bold text-xl">Optovia</span>
</NuxtLink> </NuxtLink>
</div> </div>
<!-- Center: Search block (input + chips together) --> <!-- Center: Search input + chips -->
<div class="flex-1 flex justify-center px-4 max-w-3xl mx-auto"> <div class="flex-1 flex flex-col items-center px-4 max-w-2xl mx-auto gap-2">
<!-- Big rounded input -->
<div <div
class="w-full bg-base-200/50 rounded-2xl p-4 border border-base-300 shadow-sm hover:shadow-md transition-all" 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"
> >
<!-- Input row with tokens --> <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
<div
class="flex items-center gap-3 px-4 py-3 bg-base-100 rounded-xl border border-base-300 cursor-text"
@click="focusInput"
>
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
<!-- Tokens + input inline --> <!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0"> <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
<!-- Active filter tokens --> <!-- Active filter tokens -->
<div <div
v-for="token in activeTokens" v-for="token in activeTokens"
:key="token.type" :key="token.type"
class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white" class="badge badge-lg gap-1.5 cursor-pointer hover:opacity-80 transition-all flex-shrink-0 text-white"
:style="{ backgroundColor: getTokenColor(token.type) }" :style="{ backgroundColor: getTokenColor(token.type) }"
@click.stop="$emit('edit-token', token.type)" @click.stop="$emit('edit-token', token.type)"
>
<Icon :name="token.icon" size="14" />
<span class="max-w-28 truncate">{{ token.label }}</span>
<button
class="hover:text-error"
@click.stop="$emit('remove-token', token.type)"
>
<Icon name="lucide:x" size="14" />
</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"
v-model="localSearchQuery"
type="text"
:placeholder="placeholder"
class="flex-1 min-w-32 bg-transparent outline-none text-lg"
@input="$emit('update:search-query', localSearchQuery)"
/>
</div>
</div>
<!-- Chips row (inside same block) -->
<div
v-if="availableChips.length > 0"
class="flex items-center justify-center gap-2 mt-3"
>
<button
v-for="chip in availableChips"
:key="chip.type"
class="btn btn-sm btn-ghost gap-1.5"
@click="$emit('start-select', chip.type)"
> >
<Icon name="lucide:plus" size="14" /> <Icon :name="token.icon" size="14" />
{{ chip.label }} <span class="max-w-28 truncate">{{ token.label }}</span>
</button> <button
class="hover:text-error"
@click.stop="$emit('remove-token', token.type)"
>
<Icon name="lucide:x" size="14" />
</button>
</div>
<!-- Search input -->
<input
ref="inputRef"
v-model="localSearchQuery"
type="text"
:placeholder="placeholder"
class="flex-1 min-w-32 bg-transparent outline-none text-lg"
@input="$emit('update:search-query', localSearchQuery)"
/>
</div> </div>
</div> </div>
<!-- Chips below input -->
<div
v-if="availableChips.length > 0"
class="flex items-center justify-center gap-2"
>
<button
v-for="chip in availableChips"
:key="chip.type"
class="btn btn-xs btn-ghost gap-1"
@click="$emit('start-select', chip.type)"
>
<Icon name="lucide:plus" size="12" />
{{ chip.label }}
</button>
</div>
</div> </div>
<!-- Right: AI + Globe + Team + User --> <!-- Right: AI + Globe + Team + User (centered with input) -->
<div class="flex items-center gap-1 flex-shrink-0"> <div class="flex items-center gap-1 flex-shrink-0 h-12">
<!-- AI Assistant button --> <!-- AI Assistant button -->
<NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm"> <NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
<Icon name="lucide:bot" size="18" /> <Icon name="lucide:bot" size="18" />