Use BS5 offcanvas for sidebar.

frontend/js/app.js

@@ -40,16 +40,6 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ()
 });
 
 ready(() => {
-    // Navdrawer
-    const navbarToggle = document.getElementById('navbar-toggle');
-
-    if (null !== navbarToggle) {
-        navbarToggle.addEventListener('click', (e) => {
-            e.preventDefault();
-            document.getElementById('sidebar').classList.toggle('show');
-        });
-    }
-
     // Theme switcher
     document.querySelectorAll('.theme-switcher').forEach(
         toggle => {

frontend/scss/_bootstrap-core.scss

@@ -33,7 +33,7 @@
 // @import "bootstrap/scss/popover";
 // @import "bootstrap/scss/carousel";
 @import "bootstrap/scss/spinners";
-// @import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/offcanvas";
 // @import "bootstrap/scss/placeholders";
 
 // Helpers

frontend/scss/azuracast/_variables.scss

@@ -54,4 +54,9 @@ $progress-bar-bg: #3f51b5;
 
 $toast-font-size: 1rem;
 
+$offcanvas-border-width: 0;
+$offcanvas-bg-color: var(--bs-tertiary-bg);
+$offcanvas-padding-x: 0;
+$offcanvas-padding-y: 0;
+
 $enable-grid-classes: true;

frontend/scss/material/_navdrawer.scss

@@ -1,22 +1,6 @@
-.navdrawer {
-  outline: 0;
-  overflow: hidden auto;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  top: $header-nav-height;
-  right: auto;
+.offcanvas.navdrawer {
   width: $navdrawer-width;
-  z-index: 100;
   box-shadow: 0 0 4px 0 rgba(0, 0, 0, .14), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
-
-  background: var(--bs-tertiary-bg);
-
-  display: none;
-
-  &.show {
-    display: block;
-  }
 }
 
 @include media-breakpoint-up(lg) {
@@ -30,8 +14,11 @@
     }
   }
 
-  .navdrawer {
-    display: block;
+  .offcanvas.navdrawer {
+    transform: none;
+    visibility: visible;
+    top: $header-nav-height;
+    z-index: auto;
   }
 }
 

templates/main.phtml

@@ -60,7 +60,8 @@ endif; ?>">
 <header class="navbar bg-primary-dark shadow-sm fixed-top">
     <?php
     if ($sections->has('sidebar')): ?>
-        <button aria-controls="sidebar" aria-expanded="false" aria-label="<?= __(
+        <button data-bs-toggle="offcanvas" data-bs-target="#sidebar"
+                aria-controls="sidebar" aria-expanded="false" aria-label="<?= __(
             'Toggle Sidebar'
         ) ?>" id="navbar-toggle" class="navbar-toggler d-inline-flex d-lg-none me-3">
             <span class="navbar-toggler-icon"></span>
@@ -147,11 +148,9 @@ endif; ?>">
 
 <?php
 if ($sections->has('sidebar')): ?>
-    <div class="navdrawer" id="sidebar" tabindex="-1">
-        <nav class="navdrawer-content" aria-label="<?= __('Sidebar') ?>">
-            <?= $sections->get('sidebar') ?>
-        </nav>
-    </div>
+    <nav class="navdrawer offcanvas offcanvas-start" id="sidebar" tabindex="-1" aria-label="<?= __('Sidebar') ?>">
+        <?= $sections->get('sidebar') ?>
+    </nav>
 <?php
 endif; ?>
 

templates/partials/sidebar_menu.phtml

@@ -8,7 +8,7 @@
 
 $active ??= null;
 ?>
-<ul class="navdrawer-nav">
+<ul class="offcanvas-body navdrawer-nav">
     <?php
     foreach ($menu as $category_id => $category): ?>
         <li class="nav-item">

templates/stations/sidebar.phtml

@@ -44,7 +44,7 @@ $sections->appendStart('bodyjs');
 $sections->end();
 ?>
 
-<div class="navdrawer-header">
+<div class="navdrawer-header offcanvas-header">
     <div class="d-flex align-items-center">
         <a class="navbar-brand px-0 flex-fill" href="<?= $router->fromHere('stations:profile:index') ?>">
             <div><?= $this->e($station->getName()) ?></div>