Initial commit

2026-05-12 23:33:46 +02:00
commit ccf32dcece
104 changed files with 17439 additions and 0 deletions
--- a/js/overlay.js
+++ b/js/overlay.js
@@ -0,0 +1,133 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const header             = document.querySelector('header');
+    const body               = document.querySelector('body');
+    const menuToggle         = document.querySelector('.menu-toggle');
+    const mainMenu           = document.querySelector('.main-menu');
+    const menuOverlay        = document.querySelector('.overlay');
+    const menuIcon           = document.querySelector('.menu-toggle i');
+    const wpAdminBar         = document.querySelector('#wpadminbar');
+    const stickyHeaderMobile = document.querySelector('.header-right');
+    const searchButton       = document.querySelector('.search-button');
+    const searchPanel        = document.querySelector('.search-panel');
+    const searchIcon         = document.querySelector('.search-button i');
+    const searchInput        = document.querySelector('.search-panel__input');
+
+    const breakpointTablet = 768;
+
+    mainMenu.style.top    = `${mainMenu.offsetHeight * -1}px`;
+    searchPanel.style.top = `${searchPanel.offsetHeight * -1}px`;
+
+    // Compute the pixel offset at which panels should appear (just below the header)
+    function getHeaderBottom() {
+        const adminBarHeight = wpAdminBar ? wpAdminBar.offsetHeight : 0;
+        if (window.innerWidth < breakpointTablet) {
+            if (window.scrollY > header.getBoundingClientRect().bottom) {
+                return stickyHeaderMobile.getBoundingClientRect().bottom + window.scrollY;
+            }
+            return header.getBoundingClientRect().bottom + window.scrollY;
+        }
+        return header.offsetHeight + adminBarHeight;
+    }
+
+    function updateOverlay() {
+        const anyOpen = mainMenu.classList.contains('active') || searchPanel.classList.contains('active');
+        menuOverlay.classList.toggle('active', anyOpen);
+        if (anyOpen) {
+            body.style.overflow = 'hidden';
+        } else {
+            body.style.removeProperty('overflow');
+        }
+    }
+
+    // --- Menu ---
+    function openMenu() {
+        mainMenu.scrollTo(0, 0);
+        if (window.innerWidth < breakpointTablet) {
+            const adminBarHeight = wpAdminBar ? wpAdminBar.offsetHeight : 0;
+            if (window.scrollY > header.getBoundingClientRect().bottom) {
+                mainMenu.style.height = `${window.innerHeight - adminBarHeight - stickyHeaderMobile.offsetHeight}px`;
+            } else {
+                mainMenu.style.height = `${window.innerHeight - header.getBoundingClientRect().bottom}px`;
+            }
+        } else {
+            mainMenu.style.removeProperty('height');
+        }
+        mainMenu.style.top = `${getHeaderBottom()}px`;
+        mainMenu.classList.add('active');
+        menuIcon.classList.remove('iconoir-menu');
+        menuIcon.classList.add('iconoir-xmark');
+    }
+
+    function closeMenu() {
+        mainMenu.style.top = `${mainMenu.offsetHeight * -1}px`;
+        mainMenu.classList.remove('active');
+        menuIcon.classList.remove('iconoir-xmark');
+        menuIcon.classList.add('iconoir-menu');
+    }
+
+    function toggleMenu() {
+        if (searchPanel.classList.contains('active')) closeSearch();
+        if (mainMenu.classList.contains('active')) {
+            closeMenu();
+        } else {
+            openMenu();
+        }
+        updateOverlay();
+    }
+
+    // --- Search ---
+    function openSearch() {
+        searchPanel.style.top = `${getHeaderBottom()}px`;
+        searchPanel.classList.add('active');
+        searchIcon.classList.remove('iconoir-search');
+        searchIcon.classList.add('iconoir-xmark');
+        setTimeout(function() { if (searchInput) searchInput.focus(); }, 400);
+    }
+
+    function closeSearch() {
+        searchPanel.style.top = `${searchPanel.offsetHeight * -1}px`;
+        searchPanel.classList.remove('active');
+        searchIcon.classList.remove('iconoir-xmark');
+        searchIcon.classList.add('iconoir-search');
+    }
+
+    function toggleSearch() {
+        if (mainMenu.classList.contains('active')) closeMenu();
+        if (searchPanel.classList.contains('active')) {
+            closeSearch();
+        } else {
+            openSearch();
+        }
+        updateOverlay();
+    }
+
+    // --- Event listeners ---
+    menuToggle.addEventListener('click', toggleMenu);
+    searchButton.addEventListener('click', toggleSearch);
+
+    menuOverlay.addEventListener('click', function() {
+        if (mainMenu.classList.contains('active')) closeMenu();
+        if (searchPanel.classList.contains('active')) closeSearch();
+        updateOverlay();
+    });
+
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            if (mainMenu.classList.contains('active')) closeMenu();
+            if (searchPanel.classList.contains('active')) closeSearch();
+            updateOverlay();
+        }
+    });
+
+    let resizeTimeout;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(function() {
+            if (mainMenu.classList.contains('active')) closeMenu();
+            if (searchPanel.classList.contains('active')) closeSearch();
+            updateOverlay();
+            mainMenu.style.top    = `${mainMenu.offsetHeight * -1}px`;
+            searchPanel.style.top = `${searchPanel.offsetHeight * -1}px`;
+        }, 150);
+    });
+});