76 lines
2.0 KiB
HTML
76 lines
2.0 KiB
HTML
{%- assign page_paths = site.header_pages | default: default_paths -%}
|
|
<header>
|
|
<div class="menu">
|
|
<div class="left-menu">
|
|
<a id="home-link" href="/index.html">
|
|
<img
|
|
class="menu-logo"
|
|
src="/assets/base/caution-logo-triangle-black.svg"
|
|
alt="Caution triangle logo with black text"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="right-menu">
|
|
<ul class="header-page-links show">
|
|
{%- for path in page_paths -%} {%- assign my_page = site.pages | where:
|
|
"path", path | first -%} {%- if my_page.title -%} {%- if my_page.title
|
|
!= 'Home' -%}
|
|
<li>
|
|
<a href="{{ my_page.url | relative_url }}"
|
|
>{{ my_page.title | escape }}</a
|
|
>
|
|
</li>
|
|
{%- endif -%} {%- endif -%} {%- endfor -%}
|
|
<li class="show">
|
|
<a href="/contact.html" class="mega-inverted button">Work with us</a>
|
|
</li>
|
|
</ul>
|
|
<input type="checkbox" id="menu-toggle" />
|
|
|
|
<label for="menu-toggle" class="hamburger-menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</label>
|
|
|
|
<div class="menu-content">
|
|
<div class="inner-menu-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
let pathSegment = window.location.pathname.split("/")[1];
|
|
|
|
if (pathSegment.endsWith(".html")) {
|
|
pathSegment = pathSegment.replace(".html", "");
|
|
}
|
|
|
|
const navLinks = document.querySelectorAll(".header-page-links li a");
|
|
|
|
navLinks.forEach((link) => {
|
|
let linkPath = link
|
|
.getAttribute("href")
|
|
.replace("/", "")
|
|
.replace(".html", "");
|
|
|
|
if (linkPath === pathSegment) {
|
|
link.classList.add("active");
|
|
}
|
|
});
|
|
});
|
|
|
|
let prevScrollPos = window.scrollY;
|
|
const hamburgerMenu = document.querySelector(".menu-content");
|
|
|
|
window.addEventListener("scroll", () => {
|
|
const currentScrollPos = window.scrollY;
|
|
|
|
if (currentScrollPos > prevScrollPos) {
|
|
document.getElementById("menu-toggle").checked = false;
|
|
}
|
|
prevScrollPos = currentScrollPos;
|
|
});
|
|
</script>
|
|
</header>
|