142 lines
8 KiB
PHP
142 lines
8 KiB
PHP
<?php
|
|
|
|
use Livewire\Volt\Component;
|
|
|
|
new class extends Component {
|
|
public $searchQuery = '';
|
|
public $showMobileSearch = false;
|
|
|
|
public function search()
|
|
{
|
|
// Implementierung der Suchlogik
|
|
$this->dispatch('search-pressed', query: $this->searchQuery);
|
|
}
|
|
}; ?>
|
|
|
|
<div>
|
|
<header
|
|
class="sticky top-0 z-50 bg-white dark:bg-zinc-900 border-b border-zinc-200/50 dark:border-zinc-800/50 shadow-sm backdrop-blur-sm transition-colors duration-200">
|
|
<!-- Brand Accent Bar -->
|
|
<div
|
|
class="h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-secondary)] to-[var(--color-primary)]">
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
|
|
<!-- Burger Menu + Logo -->
|
|
<div class="flex items-center gap-3">
|
|
<!-- Burger Menu Button (immer sichtbar) -->
|
|
<button @click="$dispatch('toggle-mobile-menu')"
|
|
class="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 rounded-lg transition-colors"
|
|
aria-label="Menü öffnen">
|
|
<svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<a href="/" class="flex-shrink-0 flex items-center gap-3">
|
|
@php
|
|
$theme = config('app.theme', 'businessportal24');
|
|
|
|
// Versuche verschiedene Logo-Namenskonventionen
|
|
$logoVariants = [
|
|
"images/{$theme}-logo.svg",
|
|
'images/' . str_replace('24', '', $theme) . '-logo.svg', // businessportal-logo.svg
|
|
];
|
|
|
|
$logoPath = null;
|
|
foreach ($logoVariants as $variant) {
|
|
if (file_exists(public_path($variant))) {
|
|
$logoPath = $variant;
|
|
break;
|
|
}
|
|
}
|
|
|
|
$altText = ucfirst(str_replace(['24', '-'], [' ', ' '], $theme));
|
|
@endphp
|
|
|
|
@if ($logoPath)
|
|
<img src="{{ asset($logoPath) }}" alt="{{ $altText }}"
|
|
class="h-12 w-auto dark:brightness-0 dark:invert">
|
|
@else
|
|
<div
|
|
class="h-10 w-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center shadow-md">
|
|
<span class="text-white font-bold text-lg">{{ strtoupper(substr($theme, 0, 2)) }}</span>
|
|
</div>
|
|
@endif
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Search - Desktop -->
|
|
<div class="hidden md:flex flex-1 max-w-xl">
|
|
<form wire:submit.prevent="search" class="relative w-full">
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-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"></path>
|
|
</svg>
|
|
<input type="search" wire:model="searchQuery" placeholder="Pressemitteilungen durchsuchen..."
|
|
class="pl-10 w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all" />
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Search Icon - Mobile -->
|
|
<button @click="$wire.showMobileSearch = !$wire.showMobileSearch"
|
|
class="md:hidden p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors">
|
|
<svg class="h-5 w-5 text-zinc-900 dark:text-zinc-100" 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"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- CTA Buttons - Domain-specific -->
|
|
<div class="flex items-center gap-2">
|
|
@php
|
|
$theme = config('app.theme', 'businessportal24');
|
|
$isPresseecho = $theme === 'presseecho';
|
|
@endphp
|
|
|
|
@if ($isPresseecho)
|
|
<!-- Presseecho: Dezente Navigation -->
|
|
<a href="/login"
|
|
class="hidden sm:inline-flex items-center px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors">
|
|
Anmelden
|
|
</a>
|
|
<a href="/beitrag-einreichen"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors border border-zinc-300 dark:border-zinc-700">
|
|
Beitrag einreichen
|
|
</a>
|
|
@else
|
|
<!-- Businessportal24: Prominenter CTA -->
|
|
<a href="/login"
|
|
class="hidden sm:inline-flex items-center px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors">
|
|
Anmelden
|
|
</a>
|
|
<a href="/veroeffentlichen"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] hover:from-[var(--color-primary)]/90 hover:to-[var(--color-secondary)]/90 rounded-lg shadow-md hover:shadow-lg transition-all">
|
|
Veröffentlichen
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Search Bar -->
|
|
<div x-show="$wire.showMobileSearch" x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-2"
|
|
class="md:hidden border-t border-zinc-200 dark:border-zinc-800 px-4 py-3 bg-white dark:bg-zinc-900" x-cloak>
|
|
<form wire:submit.prevent="search" class="relative">
|
|
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400 dark:text-zinc-500"
|
|
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"></path>
|
|
</svg>
|
|
<input type="search" wire:model="searchQuery" placeholder="Pressemitteilungen durchsuchen..."
|
|
class="pl-10 w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all" />
|
|
</form>
|
|
</div>
|
|
</header>
|
|
</div>
|