toc-menu

:root { --menu-width: 500px; --menu-width-mobile: 320px; --menu-max-height: 70vh; --menu-max-height-mobile: 60vh; --menu-font-size: 18px; --menu-font-title-size: 22px; --menu-background: white; --menu-border-color: #ddd; --icon-size: 50px; --icon-size-mobile: 45px; --icon-background: #333; --icon-background-hover: #555; } .menu-toggle-icon { position: fixed !important; bottom: 30px !important; left: 30px !important; width: var(--icon-size) !important; height: var(--icon-size) !important; background: var(--icon-background) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 9998 !important; opacity: 0.8 !important; transition: opacity 0.3s !important; } .menu-toggle-icon:hover { opacity: 1 !important; background: var(--icon-background-hover) !important; } .menu-toggle-icon::before { content: '\2630' !important; color: white !important; font-size: 28px !important; font-weight: bold !important; line-height: 1 !important; margin-left: 5px !important; } #menuPageContent { position: fixed !important; bottom: 90px !important; left: 20px !important; background: var(--menu-background) !important; border: 1px solid var(--menu-border-color) !important; width: var(--menu-width) !important; max-height: var(--menu-max-height) !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 2147483647 !important; box-sizing: border-box !important; } #menuPageContent *, #menuPageContent .dmenu-top_m, #menuPageContent .dmenu-body_m { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; background: var(--menu-background) !important; } #menuPageContent .dmenu-top_m, #menuPageContent .dmenu-body_m { font-size: var(--menu-font-size) !important; line-height: 1.8 !important; } #menuPageContent .dmenu-body_m ol li a { font-size: var(--menu-font-title-size) !important; } #menuPageContent::-webkit-scrollbar { width: 8px !important; } #menuPageContent::-webkit-scrollbar-track { background: var(--menu-background) !important; } #menuPageContent::-webkit-scrollbar-thumb { background: #888 !important; } #menuPageContent::-webkit-scrollbar-thumb:hover { background: #555 !important; } @media (max-width: 768px) { .menu-toggle-icon { width: var(--icon-size-mobile) !important; height: var(--icon-size-mobile) !important; bottom: 20px !important; left: 20px !important; } #menuPageContent { width: var(--menu-width-mobile) !important; bottom: 75px !important; max-height: var(--menu-max-height-mobile) !important; } } /* Sidebar toggle transition */ td.left { transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important; overflow: hidden !important; } td.left.sidebar-hidden { width: 0 !important; min-width: 0 !important; opacity: 0 !important; padding: 0 !important; } #tagSphere, #trackerPageContent { transition: opacity 0.3s ease !important; } #tagSphere.sidebar-hidden, #trackerPageContent.sidebar-hidden { display: none !important; } (function() { if (window._tocMenuInit) { if (window.console) console.log('[TOC-Menu] SKIP: Bereits initialisiert (Singleton)'); return; } window._tocMenuInit = true; var PREFIX = '[TOC-Menu] '; var isMenuOpen = false; var isSidebarVisible = true; function log(msg) { if (window.console && console.log) { console.log(PREFIX + msg); } } log('Init gestartet...'); var menuIcon = document.getElementById('menuToggleIcon'); if (!menuIcon) { log('ERROR: menuToggleIcon nicht gefunden!'); return; } document.body.appendChild(menuIcon); log('Icon an body verschoben (Stacking Fix)'); function toggleSidebar() { var targets = [ document.querySelector('td.left'), document.getElementById('tagSphere'), document.getElementById('trackerPageContent') ]; var anyFound = false; for (var i = 0; i < targets.length; i++) { if (!targets[i]) continue; anyFound = true; if (isSidebarVisible) { targets[i].classList.add('sidebar-hidden'); } else { targets[i].classList.remove('sidebar-hidden'); } } if (!anyFound) { log('WARN: Keine Toggle-Targets gefunden'); return; } isSidebarVisible = !isSidebarVisible; log('Sidebar ' + (isSidebarVisible ? 'eingeblendet' : 'ausgeblendet')); } menuIcon.addEventListener('click', function(e) { e.stopPropagation(); toggleSidebar(); var dmenu = document.getElementById('menuPageContent'); if (dmenu) { if (isMenuOpen) { dmenu.style.display = 'none'; isMenuOpen = false; log('Menu geschlossen'); } else { window.menuBubble = true; dmenu.style.display = 'block'; isMenuOpen = true; log('Menu geoeffnet'); } } }); document.addEventListener('click', function(e) { var dmenu = document.getElementById('menuPageContent'); if (isMenuOpen && dmenu) { var clickedInsideMenu = dmenu.contains(e.target); var clickedIcon = menuIcon.contains(e.target); if (!clickedInsideMenu && !clickedIcon) { dmenu.style.display = 'none'; isMenuOpen = false; log('Menu geschlossen (Klick aussen)'); } else if (clickedInsideMenu && e.target.tagName === 'A') { dmenu.style.display = 'none'; isMenuOpen = false; log('Menu geschlossen (Link geklickt)'); } } }); log('Fertig! Handler registriert.'); })();