108 lines
3.8 KiB
HTML
108 lines
3.8 KiB
HTML
<div class="header-container">
|
|
<a href="{{ "/" | relURL }}" class="header-logo">
|
|
{{ $logo := resources.Get "images/logos/Logo_MMS43_Vertical_Defonce.svg" }}
|
|
{{ if $logo }}
|
|
<img src="{{ $logo.RelPermalink }}" alt="{{ site.Title }}" />
|
|
{{ end }}
|
|
</a>
|
|
|
|
<nav class="header-nav">
|
|
{{ range site.Menus.main }}
|
|
<a href="{{ .URL }}" class="nav-link{{ if $.IsMenuCurrent "main" . }} active{{ end }}">
|
|
{{ .Name }}
|
|
</a>
|
|
{{ end }}
|
|
</nav>
|
|
|
|
<div class="header-phone">
|
|
{{ $phoneIcon := resources.Get "images/picto/call_24dp_1F1F1F_FILL1_wght400_GRAD0_opsz24.svg" }}
|
|
{{ if $phoneIcon }}
|
|
<div class="phone-icon">
|
|
<img src="{{ $phoneIcon.RelPermalink }}" alt="Téléphone" />
|
|
</div>
|
|
{{ end }}
|
|
<div class="phone-info">
|
|
<span class="phone-number">{{ site.Params.phone | default "04 XX XX XX XX" }}</span>
|
|
<span class="phone-hours">{{ site.Params.phoneHours | default "(du lundi au vendredi, 9h - 17h)" }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile phone button -->
|
|
<a href="tel:{{ site.Params.phone | default "0400000000" }}" class="header-phone-mobile">
|
|
{{ $phoneIcon := resources.Get "images/picto/call_24dp_1F1F1F_FILL1_wght400_GRAD0_opsz24.svg" }}
|
|
{{ if $phoneIcon }}
|
|
<div class="phone-icon">
|
|
<img src="{{ $phoneIcon.RelPermalink }}" alt="Téléphone" />
|
|
</div>
|
|
{{ end }}
|
|
<div class="phone-info">
|
|
<span class="phone-number">{{ site.Params.phone | default "04 XX XX XX XX" }}</span>
|
|
<span class="phone-hours">{{ site.Params.phoneHours | default "(du lundi au vendredi, 9h - 17h)" }}</span>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Burger button -->
|
|
<button class="header-burger" aria-label="Menu" aria-expanded="false">
|
|
<span class="burger-line"></span>
|
|
<span class="burger-line"></span>
|
|
<span class="burger-line"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile menu overlay -->
|
|
<div class="mobile-menu">
|
|
<button class="mobile-menu-close" aria-label="Fermer le menu">
|
|
{{ $closeIcon := resources.Get "images/picto/close_24dp_FFFFFF_FILL1_wght400_GRAD0_opsz24.svg" }}
|
|
{{ if $closeIcon }}
|
|
<img src="{{ $closeIcon.RelPermalink }}" alt="Fermer" />
|
|
{{ else }}
|
|
<span>×</span>
|
|
{{ end }}
|
|
</button>
|
|
|
|
<nav class="mobile-menu-nav">
|
|
{{ $arrowIcon := resources.Get "images/picto/chevron_forward_24dp_1F1F1F_FILL1_wght400_GRAD0_opsz24.svg" }}
|
|
{{ range site.Menus.main }}
|
|
<a href="{{ .URL }}" class="mobile-menu-link">
|
|
<span>{{ .Name }}</span>
|
|
{{ if $arrowIcon }}
|
|
<img src="{{ $arrowIcon.RelPermalink }}" alt="" class="mobile-menu-arrow" />
|
|
{{ end }}
|
|
</a>
|
|
{{ end }}
|
|
</nav>
|
|
|
|
<div class="mobile-menu-contact">
|
|
<p class="mobile-menu-contact-title">{{ site.Params.footer.ctaTitle | default "Organisez vos déplacements en Haute-Loire" }}</p>
|
|
<p class="mobile-menu-contact-info">{{ site.Params.phone }} / {{ site.Params.email }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const burger = document.querySelector('.header-burger');
|
|
const closeBtn = document.querySelector('.mobile-menu-close');
|
|
const mobileMenu = document.querySelector('.mobile-menu');
|
|
|
|
function openMenu() {
|
|
mobileMenu.classList.add('is-open');
|
|
burger.setAttribute('aria-expanded', 'true');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeMenu() {
|
|
mobileMenu.classList.remove('is-open');
|
|
burger.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
burger.addEventListener('click', openMenu);
|
|
closeBtn.addEventListener('click', closeMenu);
|
|
|
|
// Fermer le menu au clic sur un lien
|
|
mobileMenu.querySelectorAll('.mobile-menu-link').forEach(link => {
|
|
link.addEventListener('click', closeMenu);
|
|
});
|
|
});
|
|
</script>
|