155 lines
8.4 KiB
HTML
155 lines
8.4 KiB
HTML
{{ $headerConfig := .Site.Params.header }}
|
|
{{ $dropdownConfig := $headerConfig.menu.dropdown }}
|
|
<div class="mobile-menu-wrapper">
|
|
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
|
<header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
|
<nav class="flex items-center justify-between h-20">
|
|
<!-- Logo and Title -->
|
|
<a href="{{ "/" | relLangURL }}" class="flex items-center space-x-4">
|
|
{{ with $headerConfig.logo }}
|
|
<img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-12{{ end }} w-auto object-contain">
|
|
{{ else }}
|
|
<span class="text-3xl font-bold text-gray-900">{{ .Site.Title }}</span>
|
|
{{ end }}
|
|
{{ if .Site.Title }}
|
|
<span class="text-3xl font-semibold text-gray-800">{{ .Site.Title }}</span>
|
|
{{ end }}
|
|
</a>
|
|
|
|
<!-- Navigation -->
|
|
<div class="hidden ml-8 lg:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
|
|
{{ range .Site.Menus.main }}
|
|
{{ if .Params.has_submenu }}
|
|
<div class="relative group">
|
|
<button class="flex items-center {{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">
|
|
{{ .Name }}
|
|
<svg class="ml-2 w-4 h-4" 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>
|
|
<div class="absolute left-0 mt-2 {{ $dropdownConfig.width | default "w-72" }} opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out">
|
|
<div class="{{ $dropdownConfig.container_padding | default "py-6" }} {{ $dropdownConfig.background | default "bg-white" }} {{ $dropdownConfig.border | default "border border-gray-100" }} {{ $dropdownConfig.shadow | default "shadow-xl" }} {{ $dropdownConfig.radius | default "rounded-lg" }}">
|
|
{{ range .Params.submenu }}
|
|
<a href="{{ .url }}" class="block {{ $dropdownConfig.item_padding | default "px-8 py-3" }} {{ $dropdownConfig.text_size | default "text-sm" }} {{ $dropdownConfig.text_color | default "text-gray-700" }} {{ $dropdownConfig.hover_background | default "hover:bg-gray-50" }}">{{ .name }}</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
<!-- Language Switcher -->
|
|
{{/* {{ partial "language-switcher" . }} */}}
|
|
</div>
|
|
|
|
<!-- CTA Buttons -->
|
|
{{ if not $headerConfig.hideButtons }}
|
|
<div class="hidden ml-8 lg:flex items-center space-x-4">
|
|
{{ with $headerConfig.buttons.demo }}
|
|
<a href="{{ .url | default "#" }}"
|
|
class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-400 hover:scale-105{{ end }}"
|
|
{{ if .open_tab }}target="_blank" rel="noopener noreferrer"{{ end }}>
|
|
{{ .text | default "Démo" }}
|
|
</a>
|
|
{{ end }}
|
|
|
|
</div>
|
|
{{ end }}
|
|
|
|
<!-- Mobile Menu Toggle -->
|
|
<div class="lg:hidden">
|
|
<label for="nav-toggle" class="p-2 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 transition-colors cursor-pointer">
|
|
<svg class="w-6 h-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>
|
|
</label>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div class="nav-content lg:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg max-h-[calc(100vh-5rem)] overflow-y-auto">
|
|
<div class="w-full px-6 py-4">
|
|
{{ range .Site.Menus.main }}
|
|
{{ if .Params.has_submenu }}
|
|
<div class="py-2">
|
|
<div class="text-xl text-gray-900 font-bold mb-2">{{ .Name }}</div>
|
|
<div class="pl-4">
|
|
{{ range .Params.submenu }}
|
|
<a href="{{ .url }}" class="block text-gray-700 hover:text-primary-600 py-2">{{ .name }}</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ else }}
|
|
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-xl text-gray-900 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
<!-- Mobile Language Switcher -->
|
|
{{ if hugo.IsMultilingual }}
|
|
<div class="py-4 border-t border-gray-200 mt-4">
|
|
<div class="text-lg text-gray-600 font-semibold mb-2">{{ i18n "language" }}</div>
|
|
{{ range .Site.Languages }}
|
|
{{ if eq $.Site.Language.Lang .Lang }}
|
|
<span class="block py-2 text-primary-600 font-bold">{{ .LanguageName }}</span>
|
|
{{ else }}
|
|
{{ $langURL := printf "/%s/" .Lang }}
|
|
<a href="{{ $langURL }}" class="language-switch-link block py-2 text-gray-700 hover:text-primary-600" data-lang="{{ .Lang }}">
|
|
{{ .LanguageName }}
|
|
</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ if not $headerConfig.hideButtons }}
|
|
<div class="pt-4 space-y-4">
|
|
{{ with $headerConfig.buttons.demo }}
|
|
<a href="{{ .url | default "#" }}"
|
|
class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-400 hover:scale-105{{ end }}"
|
|
{{ if .open_tab }}target="_blank" rel="noopener noreferrer"{{ end }}>
|
|
{{ .text | default "Démo" }}
|
|
</a>
|
|
{{ end }}
|
|
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
.mobile-menu-wrapper {
|
|
position: relative;
|
|
}
|
|
.nav-toggle {
|
|
display: none;
|
|
}
|
|
.nav-content {
|
|
display: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.nav-toggle:checked ~ header .nav-content {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
var navToggle = document.getElementById('nav-toggle');
|
|
if (navToggle) {
|
|
navToggle.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</div>
|