Fetch Problem mit Sidebar Toggle (DOM, template)

[tiger5nrg]

Hallo zusammen,

ich arbeite derzeit an einer Hobby-Website und versuche, eine Sidebar mit einem Toggle-Button zu implementieren. Leider habe ich Schwierigkeiten mit der Funktionalität des Toggles und hoffe, dass mir hier jemand weiterhelfen kann.

Das Problem besteht darin, dass die Sidebar nicht wie erwartet sichtbar wird, wenn der Toggle-Button geklickt wird. Die Sidebar sollte erscheinen, wenn der Button geklickt wird, und verschwinden, wenn er erneut geklickt, bzw. die Seite gescrollt wird. Zusätzlich sollte die Sidebar automatisch erscheinen, wenn die Bildschirmbreite größer als 590 Pixel ist, und verschwinden, wenn sie kleiner als 590 Pixel ist.

Eigentlich funktioniert alles - bis auf die Klick-Aktivierung auf den kleineren Viewports. Es ist zu Haare ausreißen - Ich habe schon alles mögliche ausprobiert.

1. Ich habe sicherzustellen versucht, dass das JavaScript erst ausgeführt wird, nachdem der Inhalt der Sidebar geladen wurde. Dafür habe ich die Funktion initializeSidebarToggle() in das then-Block der Fetch-Anfrage platziert, um sicherzustellen, dass sie erst ausgeführt wird, wenn der Sidebar-Inhalt geladen ist.

2. Ich habe auch überprüft, ob die Event-Listener ordnungsgemäß hinzugefügt werden, und ob die Bedingungen in den Funktionen handleResize() und handleScroll() korrekt sind, um die Sidebar je nach Bildschirmbreite ein- und auszublenden.

Leider konnte ich das Problem trotz dieser Versuche nicht lösen. Es scheint, als ob der Toggle-Button nicht richtig mit der Sidebar verknüpft ist oder dass es ein Problem mit der Sichtbarkeit der Sidebar gibt.

Die Konsole im Browser zeigt "active" richtig an bei einem Klick - nur ändert sich optisch an der Seite nichts, also die Sidebar wird nicht sichtbar. Auch logs werden richtig angezeigt, wenn Ich einen einfüge. Könnte es da ein Clash mit CSS:

Code:

.sidebar {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 2rem;
  background-color: var(--first-color);
  width: 3.5rem;
  border-right: .1px solid var(--first-color-alt);
  z-index: 1;
  padding-top: 2rem;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.sidebar.active {
  transform: translateX(0) !important;
}

.sidebar-toggle {
  position: fixed;
  top: 1rem;
  left: 3.5rem;
  background-color: var(--first-color);
  border-radius: 0 0 .5rem 0;
  width: 1.5rem;
  height: 3rem;
  cursor: pointer;
  cursor: pointer;
  transition: transform 0.3s ease;
}

oder den breakpoints geben?

Code:

@media screen and (min-width: 590px){
  .sidebar {
    transform: translateX(0);
  }
  .sidebar-toggle {
    display: none;
  }
  .contact__container{
    grid-template-columns: 360px;
    justify-content: center;
  }
  .footer__copy-group {
    width: 60%;
  }
  .footer__container {
    margin-left: 4rem;
  }
  .policy__section {
    padding: 2rem 4rem 2rem 4rem;
  }
}

Die sidebar wird jeweils auf den html Seiten als template geladen:
<div id="sidebar"></div>

Die Reihenfolge der geladenen JS Dateien:
<!--================ MAIN JS ================-->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/template.js"></script>
    <script src="assets/js/sidebar.js"></script>

Hier ist der relevante JavaScript-Code (sidebar.js), den ich derzeit verwende:

Code:

function initializeSidebarToggle() {
    const sidebar = document.getElementById('sidebar');
    const sidebarToggle = document.getElementById('sidebar-toggle');

    function toggleSidebar() {
        const sidebarContainer = document.getElementById('sidebar');
        sidebarContainer.classList.toggle('active');
    }
   
    function handleResize() {
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        if (viewportWidth >= 590) {
            sidebar.classList.add('active');
            sidebarToggle.style.display = 'none'; // Hide sidebar toggle button on larger screens
        } else {
            sidebar.classList.remove('active');
            sidebarToggle.style.display = 'block'; // Show sidebar toggle button on smaller screens
        }
    }

    function handleScroll() {
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
        if (viewportWidth < 590) {
            sidebar.classList.remove('active');
        }
    }

    // Attach event listeners
    sidebarToggle.addEventListener('click', toggleSidebar);
    window.addEventListener('resize', handleResize);
    window.addEventListener('scroll', handleScroll);

    // Set the initial state of the sidebar
    handleResize();
}

// Load sidebar template and initialize sidebar toggle functionality after the content is loaded
window.addEventListener('DOMContentLoaded', () => {
    const sidebarContainer = document.getElementById('sidebar');
    fetch('sidebar.html')
        .then(response => response.text())
        .then(data => {
            sidebarContainer.innerHTML = data;
            initializeSidebarToggle();
        })
        .catch(error => console.error('Error loading sidebar template:', error));
});

Ich würde mich sehr über Unterstützung bei der Lösung dieses Problems freuen. Vielen Dank im Voraus für eure Hilfe!