Fetch Problem mit Sidebar Toggle (DOM, template)

[tiger5nrg]

Ich verstehe nicht warum das ein Problem darstellt. In meiner bisherigen Aufstellung funktioniert das Ein- u. Ausgleiten bei Änderung des viewports perfekt und auch wird der Toggle korrekt dargestellt, wenn Ich mich dann im "mobile-viewport" befinde. Das Problem ist dass Ich das Ein- u. Ausgleiten nicht im "mobile-viewport" mit einem Klick durchführen kann. Beim untersuchen im Browser sehe Ich das die Sidebar auf #active geschaltet wird sobald Ich den Toggle klicke, aber optisch passiert einfach nichts.

Nichts desto trotz habe Ich dein Vorschlag einmal ausprobiert - mit der Folge, dass das gleiche Problem vorherrscht (mit verschobenem Toggle).

In meiner ersten Version hatte Ich keinen Fetch und da hat die Sidebar sahnemäßig funktioniert:

Code:

document.addEventListener('DOMContentLoaded', function () {
    const sidebar = document.getElementById('sidebar');
    const sidebarToggle = document.getElementById('sidebar-toggle');
 
    function toggleSidebar() {
        sidebar.classList.toggle('active');
    }
    function hideSidebar() {
        sidebar.classList.remove('active');
    }
    function handleResize() {
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        if (viewportWidth >= 590) {
            sidebar.classList.add('active');
        } else {
            hideSidebar();
        }
    }
    function handleScroll() {
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        if (viewportWidth < 590) {
            hideSidebar();
        }
    }
    sidebarToggle.addEventListener('click', toggleSidebar);
    window.addEventListener('resize', handleResize);
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('load', handleResize);
  });
 

Es ist zum durchdrehen, da Ich schon seit Wochen nicht weiter komme