Files
vergabe-teilnahme/vergabe_teilnahme/templates/partials/topbar.html
2026-05-08 14:26:48 +02:00

47 lines
2.4 KiB
HTML

{% load static %}
<header class="h-14 bg-white border-b border-slate-200 flex items-center px-4 gap-4 z-30 sticky top-0">
<button @click="sidebarOpen = !sidebarOpen"
class="p-1.5 rounded-lg text-slate-500 hover:bg-slate-100">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
<a href="/" class="text-brand-700 font-semibold text-lg shrink-0">Vergabe Teilnahme</a>
<form hx-get="/suche/" hx-target="#search-results" hx-trigger="input changed delay:300ms"
class="relative flex-1 max-w-lg mx-auto">
<input name="q" type="search" placeholder="Ausschreibung, Aufgabe, Dokument suchen..."
autocomplete="off"
class="form-input w-full pl-9">
<svg class="absolute left-2.5 top-2.5 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
<div id="search-results"
class="absolute top-full left-0 w-full bg-white rounded-b-lg shadow-lg z-50 hidden [&:not(:empty)]:block">
</div>
</form>
<div x-data="{ open: false }" class="relative ml-auto shrink-0">
<button @click="open = !open" @click.outside="open = false"
class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-100 text-sm text-slate-700">
<span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-brand-100 text-brand-700 font-semibold text-xs">
{{ request.user.first_name|first|default:"?" }}
</span>
<span>{{ request.user.get_full_name|default:request.user.username }}</span>
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div x-show="open" x-cloak
class="absolute right-0 top-full mt-1 w-48 bg-white border border-slate-200 rounded-lg shadow-lg py-1 z-50">
<div class="px-3 py-2 text-xs text-slate-500 border-b border-slate-100">
{{ request.user.get_rolle_display|default:"Mitarbeiter" }}
</div>
<a href="/accounts/logout/"
class="block px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">Abmelden</a>
</div>
</div>
</header>