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!

[Sempervivum]

Guten Abend,
leider postest Du nur eine Zeile des HTML. Wichtig für das Problem ist jedoch auch, wo der Button für das Toggeln der Sidebar angeordnet ist.
Dies:
"Das Problem besteht darin, dass die Sidebar nicht wie erwartet sichtbar wird, wenn der Toggle-Button geklickt wird."
deutet darauf hin, dass er außerhalb der Sidebar liegt?

[tiger5nrg]

Achso klar ohne sidebar.html wird es nicht gehen   .  Wurde wie gesagt als template angelegt.

Code:

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sidebar</title>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/breakpoints.css">
    <link rel="stylesheet" href="assets/css/variable.css">
    <link rel="stylesheet" href="assets/css/sidebar.css">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&
    family=Playfair+Display:wght@400;500;700&family=Roboto:wght@400;500;700&family=Vidaloka&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="sidebar" id="sidebar">
        <button class="sidebar-toggle" id="sidebar-toggle">
            <img src="assets/icons/f-menu-24.png" alt="menu da barra lateral">
        </button>
        <button class="sidebar-button">
            <img src="assets/icons/carne-48.png" alt="ícone de carne">
            <div>Carne</div>
        ....
        </button>
        <button class="sidebar-button">
            <img src="assets/icons/vegano-48.png" alt="ícone vegano">
            <div>Vegano</div>
        </button>
    </nav>
</body>
</html>

[Sempervivum]

Da sehe ich jetzt drei Probleme:
1. Den Button für das Toggeln bekomme ich nicht zu Gesicht weil er sich innerhalb der Sidebar befindet und die ist bei schmalem Viewport zunächst unsichtbar.
2. Zu dem nav.sidebar#sidebar muss es einen Container geben, in den das HTML hinein geladen wird. Dieser muss eine andere ID haben, z. B. sidebar-cont. 
3. Wenn Du die Sidebar so lädst und das geladene HTML in den Container einträgst, darf dieses HTML kein Grundgerüst enthalten, denn dieses wird ja auch in den Container eingetragen, so dass es am Ende doppelt ist.

Wenn ich den Button aus dem sidebar-HTML heraus ziehe und auch die beiden anderen Maßnahmen umsetze, funktioniert zumindest das Ein- und Ausgleiten.

Mein HTML zum Testen:

Code:

<body>
    <button class="sidebar-toggle" id="sidebar-toggle">
        <img src="images/buttonrightp.png" alt="menu da barra lateral">
    </button>
    <div id="sidebar-cont"></div>
    <main></main>
</body>

[Sempervivum]

Gelöscht, da im falschen Thread gepostet.

[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

[Sempervivum]

Poste am besten mal die URL der fraglichen Seite. Möglicher Weise verhält sich mein Testaufbau anders als diese.

[tiger5nrg]

jetzt endlich funktioniert. Es haben einfach nur ein paar styles in CSS gefehlt.

.sidebar-toggle {
    display: none;
}
@media (min-width: 590px) {
    .sidebar {
        transform: translateX(0);
    }
    .sidebar-toggle {
        display: none;
    }
}
@media (max-width: 590px) {
    .sidebar {
        transform: translateX(-100%);
    }

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

.sidebar-toggle {
        display: block;
    }  
}