Add menu tu wagabunda

2025-11-21 10:35:24 +01:00
parent cde9871489
commit 5cae883a38
4 changed files with 211 additions and 2 deletions
--- a/wagabunda.net.pl/custom.js
+++ b/wagabunda.net.pl/custom.js
@@ -92,3 +92,97 @@ const firstRow = mainHeader.querySelector('.row.sortable-row')
 if (firstRow) {
 	firstRow.outerHTML = header_html
 }
+
+// MARK: hamburger menu
+(function () {
+  const menuList = document.querySelector('nav.main-nav ul.mega-menu-content');
+
+  if (!menuList) return;
+
+  menuList.insertAdjacentHTML('beforebegin', `
+    <div class="mega-menu-hamburger">
+      <button class="mega-menu-hamburger-btn" aria-expanded="true" aria-controls="mega-menu-list">
+        <span></span>
+      </button>
+    </div>
+  `);
+
+  menuList.id = menuList.id || 'mega-menu-list';
+
+  const hamburgerBtn = document.querySelector('.mega-menu-hamburger-btn');
+
+  function slideUp(element, duration = 300) {
+    element.style.height = element.offsetHeight + 'px';
+    element.offsetHeight;
+    element.style.transitionProperty = 'height, margin, padding';
+    element.style.transitionDuration = duration + 'ms';
+    element.style.overflow = 'hidden';
+    element.style.height = '0';
+    element.style.paddingTop = '0';
+    element.style.paddingBottom = '0';
+    element.style.marginTop = '0';
+    element.style.marginBottom = '0';
+
+    window.setTimeout(function () {
+      element.style.display = 'none';
+      element.style.removeProperty('height');
+      element.style.removeProperty('padding-top');
+      element.style.removeProperty('padding-bottom');
+      element.style.removeProperty('margin-top');
+      element.style.removeProperty('margin-bottom');
+      element.style.removeProperty('overflow');
+      element.style.removeProperty('transition-duration');
+      element.style.removeProperty('transition-property');
+    }, duration);
+  }
+
+  function slideDown(element, duration = 300) {
+    element.style.removeProperty('display');
+    let display = window.getComputedStyle(element).display;
+    if (display === 'none') display = 'flex';
+    element.style.display = display;
+
+    const height = element.scrollHeight;
+    element.style.overflow = 'hidden';
+    element.style.height = '0';
+    element.style.paddingTop = '0';
+    element.style.paddingBottom = '0';
+    element.style.marginTop = '0';
+    element.style.marginBottom = '0';
+    element.offsetHeight;
+
+    element.style.transitionProperty = 'height, margin, padding';
+    element.style.transitionDuration = duration + 'ms';
+    element.style.height = height + 'px';
+
+    window.setTimeout(function () {
+      element.style.removeProperty('height');
+      element.style.removeProperty('overflow');
+      element.style.removeProperty('transition-duration');
+      element.style.removeProperty('transition-property');
+      element.style.removeProperty('padding-top');
+      element.style.removeProperty('padding-bottom');
+      element.style.removeProperty('margin-top');
+      element.style.removeProperty('margin-bottom');
+    }, duration);
+  }
+
+  function slideToggle(element, duration = 300) {
+    if (window.getComputedStyle(element).display === 'none') {
+      slideDown(element, duration);
+    } else {
+      slideUp(element, duration);
+    }
+  }
+
+  if (hamburgerBtn) {
+    hamburgerBtn.addEventListener('click', function () {
+      hamburgerBtn.classList.toggle('active');
+
+      const isExpanded = hamburgerBtn.classList.contains('active');
+      hamburgerBtn.setAttribute('aria-expanded', String(isExpanded));
+
+      slideToggle(menuList, 250);
+    });
+  }
+})();