Tweak offcanvas sidebar look and behavior

* Move close button to the top-right corner.
* Match default sidebar width and look.
* Close it when a navigation link is clicked.

dashboard/src/components/Header.vue

@@ -1,25 +1,16 @@
 <script setup lang="ts">
 import Breadcrumb from "@/components/Breadcrumb.vue";
 import { useLayoutStore } from "@/stores/layout";
-import Offcanvas from "bootstrap/js/dist/offcanvas";
-import { onMounted } from "vue";
 import IconMenuLine from "~icons/clarity/menu-line";
 
 const layoutStore = useLayoutStore();
-
-const offcanvas = $ref<HTMLElement | null>(null);
-
-onMounted(() => {
-  if (offcanvas) new Offcanvas(offcanvas);
-});
 </script>
 
 <template>
   <header class="bg-white border-bottom sticky-top">
     <nav class="navbar navbar-expand-md p-0">
       <!-- Open offcanvas button, only visible in sm. -->
       <button
-        ref="offcanvas"
         type="button"
         class="navbar-toggler btn btn-link text-decoration-none p-3"
         data-bs-toggle="offcanvas"

dashboard/src/components/Sidebar.vue

@@ -3,6 +3,7 @@ import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { useRouter } from "vue-router/auto";
 import Collapse from "bootstrap/js/dist/collapse";
+import Offcanvas from "bootstrap/js/dist/offcanvas";
 import { onMounted } from "vue";
 import RawIconBundleLine from "~icons/clarity/bundle-line?raw&width=2em&height=2em";
 import IconCaretLine from "~icons/clarity/caret-line";
@@ -36,10 +37,18 @@ const menuItems = [
   },
 ];
 
+let offcanvasInstance = <Offcanvas | null>null;
+const offcanvas = $ref<HTMLElement | null>(null);
 const collapse = $ref<HTMLElement | null>(null);
+
 onMounted(() => {
+  if (offcanvas) offcanvasInstance = new Offcanvas(offcanvas);
   if (collapse) new Collapse(collapse);
 });
+
+const closeOffcanvas = () => {
+  if (offcanvasInstance) offcanvasInstance.hide();
+};
 </script>
 
 <template>
@@ -51,7 +60,7 @@ onMounted(() => {
     aria-labelledby="offcanvasLabel"
     ref="offcanvas"
   >
-    <div class="offcanvas-header px-3">
+    <div class="offcanvas-header">
       <h5 class="offcanvas-title" id="offcanvasLabel">Navigation</h5>
       <button
         type="button"
@@ -61,7 +70,7 @@ onMounted(() => {
         aria-label="Close"
       ></button>
     </div>
-    <div class="offcanvas-body d-flex flex-grow-1 py-0">
+    <div class="offcanvas-body d-flex flex-grow-1 p-0">
       <nav
         aria-labelledby="offcanvasLabel"
         class="flex-grow-1 d-flex flex-column"
@@ -74,6 +83,7 @@ onMounted(() => {
               active-class="active"
               exact-active-class="exact-active"
               :to="item.route"
+              @click="closeOffcanvas"
             >
               <div class="container-fluid">
                 <div class="row">
@@ -223,10 +233,6 @@ onMounted(() => {
       transform: rotate(180deg);
     }
   }
-
-  .sidebar.show & .col-9 svg {
-    margin-right: 2 * $spacer;
-  }
 }
 
 @media (min-width: 768px) {

dashboard/src/styles/bootstrap-base.scss

@@ -1,21 +1,20 @@
 @import "bootstrap/scss/functions";
 
-// Variable overrides.
+// Custom variables.
+$header-height: 64px;
+$sidebar-width: 200px;
+$sidebar-collapsed-width: 90px;
+
+// Bootstrap variable overrides.
 $primary: #5e2750;
 $link-color: #0d6efd;
-$offcanvas-horizontal-width: 300px;
-$offcanvas-padding-x: 0;
+$offcanvas-horizontal-width: $sidebar-width;
 $headings-color: $primary;
 $headings-font-weight: 400;
 $border-radius: 0;
 $border-radius-sm: 0;
 $border-radius-lg: 0;
 
-// Custom variables.
-$header-height: 64px;
-$sidebar-width: 200px;
-$sidebar-collapsed-width: 90px;
-
 // Bootstrap required.
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/variables-dark";