Toggle panel sidebar with ALT+A keyboard shortcut

Utilize Alpine to implement an ALT+A keyboard shortcut to open the offcanvas nav. This can be done from anywhere in the panel, even when scrolled all the way to the bottom/away from top bar. We're instantiating a bootstrap offcanvas based on the panel offcanvas ID, and storing that. This is then toggled when the shortcut is used.
zediious · Jun 11, 2024 · 41b13b8 · 41b13b8
1 parent d54577a
commit 41b13b8
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/raptorWeb/templates/panel/top_bar.html b/raptorWeb/templates/panel/top_bar.html
@@ -4,11 +4,13 @@
     <div class="container-flex w-100">
         <div class="row w-100">
             <div class=" col-lg-6 col-8 d-flex align-items-start justify-content-start">
-                <div class="navbar-header d-flex">
+                <div class="navbar-header d-flex" x-data="{offcanvasElt: false}">
                     <button id="navToggle" class="navbar-toggler m-0 mt-3 mb-3 mt-0 mb-0 ms-3 border-2"
                             data-bs-toggle="offcanvas"
                             data-bs-target="#offcanvasNav"
                             aria-controls="offcanvasNav"
+                            x-init="offcanvasElt = new bootstrap.Offcanvas(htmx.find('#offcanvasNav'))"
+                            @keyup.alt.a.document="offcanvasElt.toggle()"
                     >
                         <span class="navbar-toggler-icon" ></span>
                     </button>