290 lines
16 KiB
PHP
290 lines
16 KiB
PHP
<?php
|
|
|
|
use Livewire\Volt\Component;
|
|
|
|
new class extends Component {
|
|
public $isOpen = false;
|
|
public $openSections = [];
|
|
|
|
public function toggleMenu()
|
|
{
|
|
$this->isOpen = !$this->isOpen;
|
|
}
|
|
|
|
public function toggleSection($section)
|
|
{
|
|
if (in_array($section, $this->openSections)) {
|
|
$this->openSections = array_diff($this->openSections, [$section]);
|
|
} else {
|
|
$this->openSections[] = $section;
|
|
}
|
|
}
|
|
|
|
public function isSectionOpen($section)
|
|
{
|
|
return in_array($section, $this->openSections);
|
|
}
|
|
}; ?>
|
|
|
|
<div
|
|
x-data="{ isOpen: $wire.entangle('isOpen') }"
|
|
@toggle-mobile-menu.window="$wire.toggleMenu()"
|
|
>
|
|
<!-- Overlay -->
|
|
<div
|
|
x-show="isOpen"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="$wire.toggleMenu()"
|
|
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60]"
|
|
x-cloak
|
|
></div>
|
|
|
|
<!-- Slide-out Menu -->
|
|
<div
|
|
x-show="isOpen"
|
|
x-transition:enter="transition ease-out duration-300 transform"
|
|
x-transition:enter-start="-translate-x-full"
|
|
x-transition:enter-end="translate-x-0"
|
|
x-transition:leave="transition ease-in duration-200 transform"
|
|
x-transition:leave-start="translate-x-0"
|
|
x-transition:leave-end="-translate-x-full"
|
|
class="fixed left-0 top-0 h-full w-80 sm:w-96 bg-white dark:bg-gray-900 shadow-2xl z-[70] overflow-y-auto transition-colors duration-200"
|
|
x-cloak
|
|
>
|
|
<!-- Header -->
|
|
<div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4 flex items-center justify-between transition-colors duration-200">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-1 h-6 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Navigation</h2>
|
|
</div>
|
|
<button
|
|
@click="$wire.toggleMenu()"
|
|
class="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
|
aria-label="Menü schließen"
|
|
>
|
|
<svg class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="p-6 space-y-6">
|
|
<!-- Portal Section -->
|
|
<div>
|
|
<div class="py-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Portal</div>
|
|
<div class="space-y-1">
|
|
<a href="/" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Startseite
|
|
</a>
|
|
<a href="/kategorien" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Kategorien
|
|
</a>
|
|
<a href="/suche" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Suche
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Section -->
|
|
<div>
|
|
<button
|
|
wire:click="toggleSection('services')"
|
|
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
|
|
</svg>
|
|
Services
|
|
</span>
|
|
<svg
|
|
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('services') ? 'rotate-180' : '' }}"
|
|
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>
|
|
@if($this->isSectionOpen('services'))
|
|
<div class="mt-2 space-y-1 pl-6">
|
|
<a href="/veroeffentlichen" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Pressemitteilung veröffentlichen
|
|
</a>
|
|
<a href="/newsrooms" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Newsrooms
|
|
</a>
|
|
<a href="/preise" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Preise & Leistungen
|
|
</a>
|
|
<a href="/api" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
API & Integrationen
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Über uns Section -->
|
|
<div>
|
|
<button
|
|
wire:click="toggleSection('about')"
|
|
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
|
</svg>
|
|
Über uns
|
|
</span>
|
|
<svg
|
|
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('about') ? 'rotate-180' : '' }}"
|
|
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>
|
|
@if($this->isSectionOpen('about'))
|
|
<div class="mt-2 space-y-1 pl-6">
|
|
<a href="/ueber-uns" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Über Business Portal
|
|
</a>
|
|
<a href="/team" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Team
|
|
</a>
|
|
<a href="/partner" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Partner
|
|
</a>
|
|
<a href="/karriere" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Karriere
|
|
</a>
|
|
<a href="/presse" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Presse
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Hilfe & Support Section -->
|
|
<div>
|
|
<button
|
|
wire:click="toggleSection('support')"
|
|
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
|
</svg>
|
|
Hilfe & Support
|
|
</span>
|
|
<svg
|
|
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('support') ? 'rotate-180' : '' }}"
|
|
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>
|
|
@if($this->isSectionOpen('support'))
|
|
<div class="mt-2 space-y-1 pl-6">
|
|
<a href="/faq" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
FAQ
|
|
</a>
|
|
<a href="/hilfe" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Hilfe-Center
|
|
</a>
|
|
<a href="/kontakt" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Kontakt
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Rechtliches Section -->
|
|
<div>
|
|
<button
|
|
wire:click="toggleSection('legal')"
|
|
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
</svg>
|
|
Rechtliches
|
|
</span>
|
|
<svg
|
|
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('legal') ? 'rotate-180' : '' }}"
|
|
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>
|
|
@if($this->isSectionOpen('legal'))
|
|
<div class="mt-2 space-y-1 pl-6">
|
|
<a href="/impressum" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Impressum
|
|
</a>
|
|
<a href="/datenschutz" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Datenschutz
|
|
</a>
|
|
<a href="/agb" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
AGB
|
|
</a>
|
|
<a href="/cookies" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
|
Cookie-Richtlinien
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Footer Actions -->
|
|
<div class="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 p-6 space-y-3 transition-colors duration-200">
|
|
<a
|
|
href="/veroeffentlichen"
|
|
class="block w-full text-center px-4 py-3 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"
|
|
>
|
|
Pressemitteilung veröffentlichen
|
|
</a>
|
|
<div class="flex gap-2">
|
|
<a
|
|
href="/login"
|
|
class="flex-1 text-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all"
|
|
>
|
|
Anmelden
|
|
</a>
|
|
<a
|
|
href="/register"
|
|
class="flex-1 text-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all"
|
|
>
|
|
Registrieren
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Info -->
|
|
<div class="px-6 pb-6">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg transition-colors duration-200">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
</svg>
|
|
<span>Kontakt</span>
|
|
</div>
|
|
<a href="mailto:info@businessportal.de" class="text-sm text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
|
info@businessportal.de
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|