79 lines
5.7 KiB
PHP
79 lines
5.7 KiB
PHP
<div class="topbar-normal" id="topbar">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-10 text-xs">
|
|
<!-- Left side - Social icons and Theme Demo -->
|
|
<div class="flex items-center space-x-4">
|
|
<!-- Social Media Icons -->
|
|
|
|
<span class="text-muted-foreground">
|
|
<a href="/theme-demo" class="text-foreground hover-text-secondary transition-colors">Theme Demo</a>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Right side - Language switcher -->
|
|
<div class="flex items-center space-x-2">
|
|
<div class="flex space-x-3">
|
|
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="Facebook">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="Instagram">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.004 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.928.875 1.418 2.026 1.418 3.323s-.49 2.448-1.418 3.244c-.875.807-2.026 1.297-3.323 1.297zm7.83-9.281c-.49 0-.928-.175-1.297-.49-.368-.315-.49-.753-.49-1.243s.122-.928.49-1.243c.369-.315.807-.49 1.297-.49s.928.175 1.297.49c.368.315.49.753.49 1.243s-.122.928-.49 1.243c-.369.315-.807.49-1.297.49z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-muted-foreground hover-text-secondary transition-colors" aria-label="LinkedIn">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button
|
|
@click="open = !open"
|
|
class="flex items-center space-x-1 text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<span class="text-sm font-medium flex items-center gap-1">
|
|
<span>{{ $localeFlags[$currentLocale] ?? '🏳️' }}</span>
|
|
<span class="text-xs">{{ $availableLocales[$currentLocale] ?? 'Deutsch' }}</span>
|
|
</span>
|
|
<svg class="w-3 h-3" 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"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Dropdown menu -->
|
|
<div
|
|
x-show="open"
|
|
@click.away="open = false"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="transform opacity-0 scale-95"
|
|
x-transition:enter-end="transform opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="transform opacity-100 scale-100"
|
|
x-transition:leave-end="transform opacity-0 scale-95"
|
|
class="absolute right-0 mt-2 w-32 bg-card border border-border rounded-md shadow-lg z-50"
|
|
style="display: none;"
|
|
>
|
|
<div class="py-1">
|
|
@foreach($availableLocales as $locale => $name)
|
|
<button
|
|
wire:click="switchLanguage('{{ $locale }}')"
|
|
@click="open = false"
|
|
class="block w-full text-left px-4 py-2 text-sm transition-colors duration-200 {{ $currentLocale === $locale ? 'bg-secondary text-secondary-foreground' : 'text-card-foreground hover:bg-gray-200 hover:text-gray-900' }}"
|
|
style="cursor: pointer;"
|
|
>
|
|
<span class="inline-flex items-center gap-2">
|
|
<span>{{ $localeFlags[$locale] ?? '🏳️' }}</span>
|
|
<span>{{ $name }}</span>
|
|
</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|