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

Redesign header: single row with unified search block
All checks were successful
Build Docker Image / build (push) Successful in 3m6s
Details

Browse Source 
- Merge two rows into one: logo + search block + icons
- Search block now contains input and chips together
- Input is bigger with larger tokens
- Remove hero section from landing page
- Update padding to match new header height
This commit is contained in:
Ruslan Bakiev
2026-01-22 11:38:32 +07:00
parent 31f3c622eb
commit c468bd8679
3 changed files with 71 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<header class="bg-base-100 shadow-md">
<!-- Top row: Logo + Icons -->
<div class="flex items-center h-14 px-4 lg:px-6">
<!-- 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">
<NuxtLink :to="localePath('/')" class="flex items-center gap-2">
@@ -9,57 +9,78 @@
</NuxtLink>
</div>
<!-- Center: Search input with tokens -->
<div class="flex-1 flex justify-center px-4 max-w-2xl mx-auto">
<!-- Center: Search block (input + chips together) -->
<div class="flex-1 flex justify-center px-4 max-w-3xl mx-auto">
<div
class="flex items-center gap-3 w-full px-5 py-2.5 border border-base-300 rounded-full bg-base-100 shadow-sm hover:shadow-md focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
@click="focusInput"
class="w-full bg-base-200/50 rounded-2xl p-4 border border-base-300 shadow-sm hover:shadow-md transition-all"
>
<Icon name="lucide:search" size="20" class="text-base-content/50 flex-shrink-0" />
<!-- 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"
@click="focusInput"
>
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
<!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
<!-- Active filter tokens -->
<div
v-for="token in activeTokens"
:key="token.type"
class="badge badge-md gap-1.5 cursor-pointer hover:badge-primary transition-colors flex-shrink-0"
@click.stop="$emit('edit-token', token.type)"
>
<Icon :name="token.icon" size="14" />
<span class="max-w-24 truncate">{{ token.label }}</span>
<button
class="hover:text-error"
@click.stop="$emit('remove-token', token.type)"
<!-- Tokens + input inline -->
<div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
<!-- Active filter tokens -->
<div
v-for="token in activeTokens"
:key="token.type"
class="badge badge-lg badge-primary gap-1.5 cursor-pointer hover:badge-secondary transition-colors flex-shrink-0"
@click.stop="$emit('edit-token', token.type)"
>
<Icon name="lucide:x" size="12" />
</button>
</div>
<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-md 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')"
<!-- Active selection mode indicator -->
<div
v-if="selectMode"
class="badge badge-lg badge-outline badge-primary gap-1.5 flex-shrink-0"
>
<Icon name="lucide:x" size="12" />
</button>
</div>
<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"
@input="$emit('update:search-query', localSearchQuery)"
/>
<!-- 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" />
{{ chip.label }}
</button>
</div>
</div>
</div>
@@ -178,21 +199,6 @@
</div>
</div>
<!-- Bottom row: Quick filter chips -->
<div
v-if="availableChips.length > 0"
class="flex items-center justify-center gap-3 px-4 py-2"
>
<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" />
{{ chip.label }}
</button>
</div>
</header>
</template>