3
0
mirror of https://git.coop/cotech/website.git synced 2025-12-17 23:17:32 +00:00
Files
cotech-website/_includes/header.html
2025-12-16 15:48:35 +00:00

45 lines
1.6 KiB
HTML

<header class="header">
<div>
<a class="header_logo-link" href="/">
<img width="100" src="/assets/img/Logo-CoTech-White.svg">
</a>
</div>
<div>
<button class="header_burger-btn" aria-label="Toggle menu">
<p><strong>MENU</strong></p>
<svg class="header_burger-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<svg class="header_close-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<ul class="header_menu-list">
<li><a href="/">Home</a></li>
<li><a href="/hire">Hire us</a></li>
<li><a href="/join">Join us</a></li>
<li><a href="/about">About</a></li>
<li><a href="/why_coops">Why co-ops</a></li>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const burgerBtn = document.querySelector('.header_burger-btn');
const menuList = document.querySelector('.header_menu-list');
burgerBtn.addEventListener('click', function() {
menuList.classList.toggle('active');
burgerBtn.classList.toggle('active');
});
const menuLinks = document.querySelectorAll('.header_menu-list a');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
menuList.classList.remove('active');
});
});
});
</script>
</header>