80 lines
3.6 KiB
HTML
80 lines
3.6 KiB
HTML
<!-- Header -->
|
|
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200" x-data="{ mobileMenuOpen: false }">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-900">{{ .Site.Title }}</a>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="hidden md:flex items-center space-x-8">
|
|
<a href="/" class="text-gray-600 hover:text-blue-600 font-medium">Accueil</a>
|
|
|
|
<!-- Dynamic Categories from WordPress -->
|
|
{{ if .Site.Data.wordpress }}
|
|
{{ $count := 0 }}
|
|
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
|
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") (eq $element.name "Uncategorized") }}
|
|
{{ continue }}
|
|
{{ else if and (lt $count 5) (ne $element.name "Soirées et afterworks") (ne $element.name "Concerts") }}
|
|
<a href="/{{ $element.slug }}"
|
|
class="text-gray-600 hover:text-blue-600 font-medium">
|
|
{{ $element.name }}
|
|
</a>
|
|
{{ $count = add $count 1 }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
</nav>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<div class="flex items-center space-x-4">
|
|
<button @click="mobileMenuOpen = !mobileMenuOpen"
|
|
class="md:hidden text-gray-600 focus:outline-none">
|
|
<svg x-show="!mobileMenuOpen" class="h-6 w-6" 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>
|
|
<svg x-show="mobileMenuOpen" class="h-6 w-6" 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div x-show="mobileMenuOpen"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
x-transition:leave-end="opacity-0 transform -translate-y-2"
|
|
class="md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|
<div class="flex flex-col space-y-4">
|
|
<a href="/" class="text-gray-600 hover:text-blue-600 font-medium py-2">Accueil</a>
|
|
|
|
<!-- Dynamic Categories for Mobile -->
|
|
{{ if .Site.Data.wordpress }}
|
|
{{ $count := 0 }}
|
|
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
|
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") (eq $element.name "Uncategorized") }}
|
|
{{ continue }}
|
|
{{ else if and (lt $count 5) (ne $element.name "Soirées et afterworks") (ne $element.name "Concerts") }}
|
|
<a href="/{{ $element.slug }}"
|
|
class="text-gray-600 hover:text-blue-600 font-medium py-2">
|
|
{{ $element.name }}
|
|
</a>
|
|
{{ $count = add $count 1 }}
|
|
{{ end }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- end Header -->
|