Wie schließt man ein Overlay bei einem Klick und gleichzeitig ein geöffnetes Offcanvas?

Um ein Overlay bei einem Klick darauf zu schließen und gleichzeitig ein geöffnetes Offcanvas zu schließen, kannst du JavaScript oder jQuery verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst:

1. **HTML-Struktur**: Stelle sicher, dass du ein Overlay und ein Offcanvas-Element hast.

```html
<div id="overlay" class="overlay"></div>
<div id="offcanvas" class="offcanvas">
<!-- Offcanvas-Inhalt -->
</div>
```

2. **CSS**: Füge grundlegende Stile für das Overlay und das Offcanvas hinzu.

```css
.overlay {
display: none; /* Standardmäßig versteckt */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}

.offcanvas {
display: none; /* Standardmäßig versteckt */
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100%;
background: white;
}
```

3. **JavaScript**: Füge die Logik hinzu, um das Overlay und das Offcanvas zu schließen.

```javascript
document.getElementById('overlay').addEventListener('click', function() {
this.style.display = 'none'; // Overlay ausblenden
document.getElementById('offcanvas').style.display = 'none'; // Offcanvas ausblenden
});

// Funktion zum Öffnen des Offcanvas und des Overlays
function openOffcanvas() {
document.getElementById('overlay').style.display = 'block'; // Overlay einblenden
document.getElementById('offcanvas').style.display = 'block'; // Offcanvas einblenden
}
```

4. **Aufruf der Funktion**: Stelle sicher, dass du die `openOffcanvas`-Funktion aufrufst, wenn du das Offcanvas öffnest.

Mit dieser Implementierung wird das Overlay geschlossen, wenn du darauf klickst, und gleichzeitig wird das Offcanvas ebenfalls geschlossen.