// @ts-check

import rhombusGradient from './rhombus-gradient.js';

const createRhombusGradient = () => {
  const containerId = document.getElementById('rhombus-gradient');
  const colorFrom = '#66cccc';
  const colorTo = '#009999';

  rhombusGradient(containerId, colorFrom, colorTo);
};

const toggleMenu = () => {
  const header = document.querySelector('header');
  const headerHeight = header?.offsetHeight;
  const elm = document.querySelector('nav');
  if (!elm || !headerHeight) return;
  elm.style.top = `${headerHeight - 18}px`;
  elm.classList.toggle('active');
}

document.addEventListener('DOMContentLoaded', () => {
  createRhombusGradient();
  let resizeTimeout;
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(createRhombusGradient, 250);
  });

  const menu = document.getElementById('menu');
  menu?.addEventListener('click', () => {
    toggleMenu();
  });

  const overlayAndNavItems = document.querySelectorAll('#nav-overlay, nav li');
  overlayAndNavItems.forEach((item) => {
    item.addEventListener('click', () => {
      toggleMenu();
    });
  });

});