Wie kann man beim Klick auf ein Overlay die entsprechende Offcanvas Sidebar ändern?

Um beim Klick auf ein Overlay die entsprechende Offcanvas-Sidebar zu schließen oder zu ändern, kannst du JavaScript oder jQuery verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst:

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

```html
<div id="overlay" class="overlay"></div>
<div id="offcanvas1" class="offcanvas">Inhalt Sidebar 1</div>
<div id="offcanvas2" class="offcanvas">Inhalt Sidebar 2</div>
```

2. **CSS**: Füge grundlegende Stile für das Overlay und die Sidebars 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;
top: 0;
right: 0;
width: 300px;
height: 100%;
background: white;
}
```

3. **JavaScript**: Verwende JavaScript, um das Overlay und die Sidebars zu steuern.

```javascript
let currentSidebar = null;

function openSidebar(sidebarId) {
if (currentSidebar) {
closeSidebar(currentSidebar);
}
currentSidebar = sidebarId;
document.getElementById(sidebarId).style.display = 'block';
document.getElementById('overlay').style.display = 'block';
}

function closeSidebar(sidebarId) {
document.getElementById(sidebarId).style.display = 'none';
document.getElementById('overlay').style.display = 'none';
currentSidebar = null;
}

document.getElementById('overlay').addEventListener('click', function() {
if (currentSidebar) {
closeSidebar(currentSidebar);
}
});
```

4. **Sidebar öffnen**: Du kannst die Sidebars mit einer Funktion öffnen, z.B. durch einen Button-Klick.

```html
<button onclick="openSidebar('offcanvas1')">Sidebar 1 öffnen</button>
<button onclick="openSidebar('offcanvas2')">Sidebar 2 öffnen</button>
```

Mit diesem Setup wird beim Klick auf das Overlay die aktuell geöffnete Sidebar geschlossen. Du kannst die `openSidebar`-Funktion aufrufen, um eine Sidebar zu öffnen, und das Overlay wird angezeigt, solange eine Sidebar geöffnet ist.