b2in/resources/views/livewire/web/components/ui/header.blade.php
2026-04-10 17:18:17 +02:00

107 lines
6.3 KiB
PHP

<header class="header-normal" id="header">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<a href="{{ $domainUrl }}" class="flex items-center">
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('positive')) }}"
alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-10 w-auto" />
</a>
<nav class="hidden md:flex items-center space-x-8" aria-label="{{ __('ui.main_navigation') }}">
@if(isset($content['navigation']) && is_array($content['navigation']))
@foreach ($content['navigation'] as $navItem)
<a href="{{ $navItem['url'] }}"
class="text-sm font-medium transition-colors relative
@if ($this->isActiveRoute($navItem['url'])) text-secondary after:absolute after:bottom-[-4px] after:left-0 after:w-full after:h-0.5 after:bg-secondary after:rounded-full
@else
text-primary hover:text-secondary @endif">
{{ $navItem['label'] }}
</a>
@endforeach
@endif
</nav>
<div class="flex items-center space-x-4">
{{-- Language Switcher --}}
<div class="hidden md:flex items-center space-x-1 text-sm" role="group" aria-label="Language">
@foreach ($availableLocales as $locale => $label)
<button wire:click="switchLanguage('{{ $locale }}')"
class="px-2 py-1 rounded transition-colors duration-200
{{ $currentLocale === $locale
? 'text-secondary font-semibold'
: 'text-muted-foreground hover:text-foreground' }}"
@if($currentLocale === $locale) aria-current="true" @endif>
{{ $label }}
</button>
@if (!$loop->last)
<span class="text-border">|</span>
@endif
@endforeach
</div>
<a href="{{ route('contact') }}"
class="hidden md:block rounded-md px-5 py-2.5 text-sm font-medium bg-secondary hover-bg-primary glow-medium text-white transition-all duration-200">
{{ __('ui.contact') }}
</a>
<button wire:click="toggleMobileMenu"
class="md:hidden w-5 h-5 text-muted-foreground hover:text-foreground transition-colors"
aria-label="{{ $this->isMobileMenuOpen ? __('ui.menu_close') : __('ui.menu_open') }}"
aria-expanded="{{ $this->isMobileMenuOpen ? 'true' : 'false' }}">
@if ($this->isMobileMenuOpen)
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
@else
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
@endif
</button>
</div>
</div>
{{-- Mobile Menu --}}
@if ($this->isMobileMenuOpen)
<div class="md:hidden border-t border-border bg-background/95 backdrop-blur-sm">
<nav class="px-4 py-6 space-y-4" aria-label="{{ __('ui.mobile_navigation') }}">
@if(isset($content['navigation']) && is_array($content['navigation']))
@foreach ($content['navigation'] as $navItem)
<a href="{{ $navItem['url'] }}"
class="block text-sm font-medium transition-colors py-2 px-3 rounded-md
@if ($this->isActiveRoute($navItem['url'])) text-secondary bg-secondary/10 border-l-2 border-secondary
@else
text-foreground hover:text-secondary hover:bg-muted/50 @endif"
wire:click="closeMobileMenu">
{{ $navItem['label'] }}
</a>
@endforeach
@endif
<div class="pt-4 border-t border-border space-y-3">
{{-- Mobile Language Switcher --}}
<div class="flex items-center space-x-1 text-sm px-3" role="group" aria-label="Language">
@foreach ($availableLocales as $locale => $label)
<button wire:click="switchLanguage('{{ $locale }}')"
class="px-3 py-1.5 rounded transition-colors duration-200
{{ $currentLocale === $locale
? 'text-secondary font-semibold bg-secondary/10'
: 'text-muted-foreground hover:text-foreground' }}"
@if($currentLocale === $locale) aria-current="true" @endif>
{{ $label }}
</button>
@if (!$loop->last)
<span class="text-border">|</span>
@endif
@endforeach
</div>
<a href="{{ route('contact') }}"
class="block rounded-md px-5 py-2.5 text-sm font-medium bg-secondary hover-bg-primary glow-medium text-white transition-all duration-200 text-center">
{{ __('ui.contact') }}
</a>
</div>
</nav>
</div>
@endif
</div>
</header>