{%- 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/distrust-text-white.svg"
          alt="Distrust broken chain logo with white 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>
      <div id="hamburger-menu" class="hide menu-button-container" for="menu-toggle">
        <input id="menu-toggle" type="checkbox" />
        <label style="display: inline-block">
          <div class='menu-button'></div>
        </label>
      </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) {
				hamburgerMenu.style.display = 'none';
			}
			prevScrollPos = currentScrollPos;
		});

	</script>
</header>