xxx-sphere-old/xxxthegame/src/main/resources/static/js/sidebar.js

(function () {
    const path = window.location.pathname;

    const groups = [
        {
            label: 'Vanilla Game',
            icon: '♡',
            items: [
                { href: '/sessionvanilla.html', icon: '▷', label: 'Neue Session' },
            ]
        },
        {
            label: 'BDSM Game',
            icon: '◆',
            items: [
                { href: '/neubdsm.html',    icon: '▷', label: 'Neue Session',   id: 'navBdsmNeu'     },
                { href: '#',               icon: '⏳', label: 'Aktive Session',  id: 'navBdsmAktiv'   },
                { href: '/bdsmingame.html', icon: '▶', label: 'Im Spiel',       id: 'navBdsmImSpiel' },
                { href: '/aufgaben.html',          icon: '✓', label: 'Aufgaben'                           },
                { href: '/toys.html',              icon: '◈', label: 'Toys'                               },
                { href: '/entdecken.html',         icon: '⊙', label: 'Entdecken'                          },
            ]
        },
        {
            label: 'Chastity Game',
            icon: '⊗',
            items: [
                { href: '/neulock.html', icon: '🆕', label: 'Neues Lock', id: 'navChastityNeu'     },
                { href: '#',                     icon: '▶️', label: 'Aktives Lock', id: 'navChastityAktiv' },
                { href: '/communityvotes.html',  icon: '🗳️', label: 'Community Votes' },
                { href: '/meine-locks.html',     icon: '🔒', label: 'Meine Locks'    },
                { href: '/keyholder.html',       icon: '🔑', label: 'Keyholder'      },
                { href: '/unlock-history.html',  icon: '🔙', label: 'Code-Historie'  },
            ]
        },
    ];

    const homeCls = path === '/userhome.html' ? ' class="active"' : '';
    const homeItem = `
        <li class="sidebar-mobile-only">
            <a href="/userhome.html"${homeCls}><span class="icon">⊞</span> Home</a>
        </li>`;

    const nav = groups.map(({ label, icon, items }) => {
        const isOpen = items.some(item => item.href === path);
        const openCls = isOpen ? ' open' : '';
        const subItems = items.map(({ href, icon: iIcon, label: iLabel, id: iId }) => {
            const cls  = path === href ? ' class="active"' : '';
            const idAt = iId ? ` id="${iId}"` : '';
            return `<li${idAt}><a href="${href}"${cls}><span class="icon">${iIcon}</span> ${iLabel}</a></li>`;
        }).join('');
        return `
            <li class="sidebar-group${openCls}">
                <a class="sidebar-group-toggle"><span class="icon">${icon}</span> ${label}<span class="sidebar-arrow">▸</span></a>
                <ul class="sidebar-sub">
                    ${subItems}
                </ul>
            </li>`;
    }).join('');

    document.body.insertAdjacentHTML('afterbegin', `
        <div class="sidebar-overlay" id="sidebarOverlay"></div>
        <button class="burger" id="burgerBtn" aria-label="Menü öffnen">
            <span class="burger-icon"><span></span><span></span><span></span></span>
        </button>
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-logo-area">
                <a href="/userhome.html"><img src="/img/logo.png" alt="Logo"></a>
            </div>
            <ul>
                ${homeItem}
                ${nav}
            </ul>
        </aside>
    `);

    // Sidebar und .main in einen zentrierten App-Wrapper verschieben
    const appWrapper = document.createElement('div');
    appWrapper.className = 'app-wrapper';
    const sidebarEl = document.getElementById('sidebar');
    const mainEl    = document.querySelector('.main');
    document.body.insertBefore(appWrapper, sidebarEl);
    appWrapper.appendChild(sidebarEl);
    if (mainEl) appWrapper.appendChild(mainEl);

    // Group toggle
    document.querySelectorAll('.sidebar-group-toggle').forEach(toggle => {
        toggle.addEventListener('click', e => {
            e.preventDefault();
            toggle.closest('.sidebar-group').classList.toggle('open');
        });
    });

    // "Im Spiel" und "Aktive Session" standardmäßig ausblenden; wird nach Session-Check ggf. wieder eingeblendet
    const navNeu      = document.getElementById('navBdsmNeu');
    const navAktiv    = document.getElementById('navBdsmAktiv');
    const navImSpiel  = document.getElementById('navBdsmImSpiel');
    const navCAktiv   = document.getElementById('navChastityAktiv');
    if (navAktiv)   navAktiv.style.display   = 'none';
    if (navImSpiel) navImSpiel.style.display = 'none';
    if (navCAktiv)  navCAktiv.style.display  = 'none';

    // Session-Status prüfen
    fetch('/login/me')
        .then(r => r.ok ? r.json() : null)
        .then(async user => {
            if (!user) return;

            // BDSM Session-Status
            try {
                // Zuerst aktive Einladung prüfen (eigenesGeraet-Spieler)
                const aktivRes = await fetch('/bdsm/einladung/meine-aktive');
                if (aktivRes.ok) {
                    const aktiv = await aktivRes.json();
                    if (navNeu)     navNeu.style.display   = 'none';
                    if (navImSpiel) navImSpiel.style.display = 'none';
                    if (navAktiv) {
                        navAktiv.style.display = '';
                        const ziel = aktiv.sessionId
                            ? '/bdsmingame.html'
                            : `/neubdsm.html`;
                        navAktiv.querySelector('a').href = ziel;
                    }
                } else {
                    // Dann laufende Host-Session prüfen
                    const sessionRes = await fetch(`/bdsm?userId=${user.userId}`);
                    const hasSession = sessionRes.status === 200;
                    if (navNeu)     navNeu.style.display     = hasSession ? 'none' : '';
                    if (navImSpiel) navImSpiel.style.display = hasSession ? ''     : 'none';
                }
            } catch (_) { /* Menü bleibt im Standardzustand */ }

            // Chastity Lock-Status
            try {
                const lockRes = await fetch('/keyholder/mylock');
                if (lockRes.ok) {
                    const lockData = await lockRes.json();
                    const lockId = lockData.lockId;
                    if (navCAktiv) {
                        navCAktiv.style.display = '';
                        navCAktiv.querySelector('a').href = '/activelock.html?lockId=' + lockId;
                    }
                }
            } catch (_) { /* Menü bleibt im Standardzustand */ }
        })
        .catch(() => {});

    const sidebar   = document.getElementById('sidebar');
    const burgerBtn = document.getElementById('burgerBtn');
    const overlay   = document.getElementById('sidebarOverlay');

    function openMenu() {
        sidebar.classList.add('open');
        overlay.classList.add('visible');
        burgerBtn.classList.add('open');
        burgerBtn.setAttribute('aria-label', 'Menü schließen');
    }

    function closeMenu() {
        sidebar.classList.remove('open');
        overlay.classList.remove('visible');
        burgerBtn.classList.remove('open');
        burgerBtn.setAttribute('aria-label', 'Menü öffnen');
    }

    burgerBtn.addEventListener('click', () =>
        sidebar.classList.contains('open') ? closeMenu() : openMenu()
    );
    overlay.addEventListener('click', closeMenu);
    sidebar.querySelectorAll('a:not(.sidebar-group-toggle)').forEach(l =>
        l.addEventListener('click', () => { if (window.innerWidth <= (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-mobile').trim()) || 768)) closeMenu(); })
    );

    // Social sidebar auf allen App-Seiten nachladen
    const s = document.createElement('script');
    s.src = '/js/social-sidebar.js';
    document.head.appendChild(s);
})();