Minecraft-Modern-Theme/Minecraft-Modern-Theme/js/navigation.js

( function () {
    'use strict';

    var isSidebarLayout = document.querySelector( '.site-header--sidebar' ) !== null;

    if ( isSidebarLayout ) {

        // --- Panel öffnen / schließen ---
        var panel    = document.getElementById( 'header-sidebar' );
        var overlay  = document.getElementById( 'sidebar-overlay' );
        var openBtn  = document.querySelector( '.sidebar-menu-toggle' );
        var closeBtn = document.querySelector( '.sidebar-menu-close' );

        function openPanel() {
            if ( ! panel ) return;
            panel.classList.add( 'is-open' );
            panel.setAttribute( 'aria-hidden', 'false' );
            if ( openBtn )   openBtn.setAttribute( 'aria-expanded', 'true' );
            if ( overlay )   overlay.classList.add( 'is-visible' );
            document.body.classList.add( 'sidebar-nav-open' );
        }

        function closePanel() {
            if ( ! panel ) return;
            panel.classList.remove( 'is-open' );
            panel.setAttribute( 'aria-hidden', 'true' );
            if ( openBtn )   openBtn.setAttribute( 'aria-expanded', 'false' );
            if ( overlay )   overlay.classList.remove( 'is-visible' );
            document.body.classList.remove( 'sidebar-nav-open' );
        }

        if ( openBtn )  openBtn.addEventListener(  'click', openPanel );
        if ( closeBtn ) closeBtn.addEventListener( 'click', closePanel );
        if ( overlay )  overlay.addEventListener(  'click', closePanel );
        document.addEventListener( 'keydown', function ( e ) {
            if ( e.key === 'Escape' ) closePanel();
        } );

        // --- Submenu Flyout ---
        var sidebarNav = document.getElementById( 'site-navigation' );
        if ( sidebarNav ) {
            sidebarNav.querySelectorAll( '.menu-item-has-children' ).forEach( function ( item ) {
                var subMenu = item.querySelector( ':scope > .sub-menu' );
                if ( ! subMenu ) return;

                var isOpen    = false;
                var moveHdlr  = null;

                function showFlyout() {
                    if ( isOpen ) return;
                    isOpen = true;
                    subMenu.style.top = item.getBoundingClientRect().top + 'px';
                    item.classList.add( 'flyout-open' );

                    // Erkennungszone berechnen:
                    // - vertikal: Höhe des li-Elements
                    // - horizontal: von linkem Rand der Sidebar (0) bis
                    //   rechtem Rand des Flyout-Panels
                    // → voller horizontaler Streifen für diesen Menüpunkt
                    moveHdlr = function ( e ) {
                        var ir  = item.getBoundingClientRect();
                        var sr  = subMenu.getBoundingClientRect();

                        var zoneLeft   = 0;                          // Bildschirmrand links
                        var zoneRight  = Math.max( ir.right, sr.right ); // bis Ende Flyout
                        var zoneTop    = ir.top;                     // oberer Rand des li
                        var zoneBottom = ir.bottom;                  // unterer Rand des li

                        var inZone = e.clientX >= zoneLeft   &&
                                     e.clientX <= zoneRight  &&
                                     e.clientY >= zoneTop    &&
                                     e.clientY <= zoneBottom;

                        if ( ! inZone ) hideFlyout();
                    };

                    document.addEventListener( 'mousemove', moveHdlr );
                }

                function hideFlyout() {
                    if ( ! isOpen ) return;
                    isOpen = false;
                    item.classList.remove( 'flyout-open' );
                    if ( moveHdlr ) {
                        document.removeEventListener( 'mousemove', moveHdlr );
                        moveHdlr = null;
                    }
                }

                item.addEventListener( 'mouseenter', showFlyout );

                // Klick-Toggle für Touch / Tastatur
                var btn = document.createElement( 'button' );
                btn.className = 'submenu-toggle';
                btn.setAttribute( 'aria-expanded', 'false' );
                btn.innerHTML = '<i class="fas fa-chevron-down"></i>';
                var link = item.querySelector( ':scope > a' );
                if ( link ) link.insertAdjacentElement( 'afterend', btn );

                btn.addEventListener( 'click', function ( e ) {
                    e.stopPropagation();
                    var open = item.classList.toggle( 'active' );
                    btn.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
                    if ( open ) {
                        subMenu.style.top = item.getBoundingClientRect().top + 'px';
                        item.classList.add( 'flyout-open' );
                        isOpen = true;
                    } else {
                        hideFlyout();
                    }
                } );
            } );
        }

        return;
    }

    // =========================================================================
    // CLASSIC / CENTERED / MEGA
    // =========================================================================
    var siteNavigation = document.getElementById( 'site-navigation' );
    if ( ! siteNavigation ) return;

    var menuToggle     = siteNavigation.querySelector( '.menu-toggle' );
    var subMenuParents = siteNavigation.querySelectorAll( '.menu-item-has-children' );

    if ( menuToggle ) {
        menuToggle.addEventListener( 'click', function () {
            var expanded = siteNavigation.classList.toggle( 'toggled' );
            this.setAttribute( 'aria-expanded', String( expanded ) );
            this.innerHTML = expanded ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        } );
        document.addEventListener( 'click', function ( e ) {
            if ( siteNavigation.classList.contains( 'toggled' ) && ! siteNavigation.contains( e.target ) ) {
                siteNavigation.classList.remove( 'toggled' );
                menuToggle.setAttribute( 'aria-expanded', 'false' );
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        } );
        window.addEventListener( 'resize', function () {
            if ( window.innerWidth > 992 ) {
                siteNavigation.classList.remove( 'toggled' );
                menuToggle.setAttribute( 'aria-expanded', 'false' );
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
                subMenuParents.forEach( function ( i ) { i.classList.remove( 'active' ); } );
            }
        } );
    }

    subMenuParents.forEach( function ( item ) {
        var btn = document.createElement( 'button' );
        btn.className = 'submenu-toggle';
        btn.setAttribute( 'aria-expanded', 'false' );
        btn.innerHTML = '<i class="fas fa-chevron-down"></i>';
        var link = item.querySelector( ':scope > a' );
        if ( link ) link.insertAdjacentElement( 'afterend', btn );
        btn.addEventListener( 'click', function ( e ) {
            e.stopPropagation();
            var open = item.classList.toggle( 'active' );
            btn.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
        } );
    } );

    document.addEventListener( 'click', function ( e ) {
        if ( ! e.target.closest( '.menu-item-has-children' ) ) {
            subMenuParents.forEach( function ( item ) {
                item.classList.remove( 'active' );
                var b = item.querySelector( '.submenu-toggle' );
                if ( b ) b.setAttribute( 'aria-expanded', 'false' );
            } );
        }
    } );

} )();