Add mobile sidebar toggle with backdrop and responsive overflow fixes

src/components/layout/MainNavbar/MainNavbar.vue

@@ -1,6 +1,11 @@
 <template>
   <div :class="['main-navbar', 'bg-white', stickyTop ? 'sticky-top' : '']">
     <d-navbar type="light" class="align-items-stretch flex-md-nowrap p-0">
+      <div class="d-flex d-md-none align-items-center pl-3">
+        <button class="btn btn-link text-dark p-0" type="button" aria-label="Open menu" @click="toggleSidebar">
+          <i class="material-icons">menu</i>
+        </button>
+      </div>
       <div class="main-navbar__search w-100 d-none d-md-flex d-lg-flex">
       </div>
       <d-navbar-nav class="border-left flex-row align-right">
@@ -70,6 +75,9 @@ export default {
     });
   },
   methods: {
+    toggleSidebar() {
+      window.dispatchEvent(new CustomEvent('toggle-sidebar'));
+    },
     getAvatar(name) {
       const svgCode = multiavatar(name);
       const parser = new DOMParser();

src/components/layout/MainSidebar/MainSidebar.vue

@@ -1,5 +1,7 @@
 <template>
-  <aside :class="['main-sidebar', 'col-12', 'col-md-3', 'col-lg-2', 'px-0', sidebarVisible ? 'open' : '']">
+  <div>
+    <div v-if="sidebarVisible" class="sidebar-backdrop d-md-none" @click="closeSidebar" />
+    <aside :class="['main-sidebar', 'col-12', 'col-md-3', 'col-lg-2', 'px-0', sidebarVisible ? 'open' : '']">
       <div class="main-navbar">
         <nav class="navbar align-items-stretch navbar-light bg-white flex-md-nowrap border-bottom p-0">
           <a class="navbar-brand w-100 mr-0" href="#" style="line-height: 25px;">
@@ -9,7 +11,7 @@
             </div>
           </a>
           <a class="toggle-sidebar d-sm-inline d-md-none d-lg-none" @click="handleToggleSidebar()">
-            <i class="material-icons">&#xE5C4;</i>
+            <i class="material-icons">close</i>
           </a>
         </nav>
       </div>
@@ -26,63 +28,69 @@
       </form>
 
       <div class="nav-wrapper">
-          <d-nav class="flex-column">
-            <li v-for="(item, navItemIdx) in items" :key="navItemIdx" class="nav-item dropdown">
-              <d-link :class="['nav-link', item.items && item.items.length ? 'dropdown-toggle' : '']" :to="item.to" v-d-toggle="`snc-${navItemIdx}`">
-                <div class="item-icon-wrapper" v-if="item.htmlBefore" v-html="item.htmlBefore" />
-                <span v-if="item.title">{{ item.title }}</span>
-                <div class="item-icon-wrapper" v-if="item.htmlAfter" v-html="item.htmlAfter" />
-              </d-link>
-              <d-collapse v-if="item.items && item.items.length" :id="`snc-${navItemIdx}`" class="dropdown-menu dropdown-menu-small" accordion="sidebar-items-accordion">
-                <d-dropdown-item v-for="(subItem, subItemIdx) in item.items" :key="subItemIdx" :href="subItem.href" :to="subItem.to">
-                  {{ subItem.title }}
-                </d-dropdown-item>
-              </d-collapse>
-            </li>
-          </d-nav>
+        <d-nav class="flex-column">
+          <li v-for="(item, navItemIdx) in items" :key="navItemIdx" class="nav-item dropdown">
+            <d-link :class="['nav-link', item.items && item.items.length ? 'dropdown-toggle' : '']" :to="item.to" v-d-toggle="`snc-${navItemIdx}`">
+              <div class="item-icon-wrapper" v-if="item.htmlBefore" v-html="item.htmlBefore" />
+              <span v-if="item.title">{{ item.title }}</span>
+              <div class="item-icon-wrapper" v-if="item.htmlAfter" v-html="item.htmlAfter" />
+            </d-link>
+            <d-collapse v-if="item.items && item.items.length" :id="`snc-${navItemIdx}`" class="dropdown-menu dropdown-menu-small" accordion="sidebar-items-accordion">
+              <d-dropdown-item v-for="(subItem, subItemIdx) in item.items" :key="subItemIdx" :href="subItem.href" :to="subItem.to">
+                {{ subItem.title }}
+              </d-dropdown-item>
+            </d-collapse>
+          </li>
+        </d-nav>
       </div>
-  </aside>
+    </aside>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'main-sidebar',
   props: {
-    /**
-      * Whether to hide the logo text, or not.
-      */
-    hideLogoText: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * The menu items.
-     */
-    items: {
-      type: Array,
-      required: true,
-    },
+    hideLogoText: { type: Boolean, default: false },
+    items: { type: Array, required: true },
   },
   data() {
-    return {
-      sidebarVisible: false,
-    };
+    return { sidebarVisible: false };
+  },
+  mounted() {
+    window.addEventListener('toggle-sidebar', this.handleToggleSidebar);
+    window.addEventListener('close-sidebar', this.closeSidebar);
+  },
+  beforeUnmount() {
+    window.removeEventListener('toggle-sidebar', this.handleToggleSidebar);
+    window.removeEventListener('close-sidebar', this.closeSidebar);
+  },
+  watch: {
+    $route() {
+      this.closeSidebar();
+    },
   },
   methods: {
     handleToggleSidebar() {
       this.sidebarVisible = !this.sidebarVisible;
     },
+    closeSidebar() {
+      this.sidebarVisible = false;
+    },
   },
 };
 </script>
 
 <style lang="scss">
-  .main-sidebar {
-    .item-icon-wrapper {
-      display: inline-block;
-    }
-    .dropdown-menu {
-      display: block;
-    }
-  }
+.main-sidebar {
+  .item-icon-wrapper { display: inline-block; }
+  .dropdown-menu { display: block; }
+}
+
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 1060;
+}
 </style>

src/scss/extras.scss

@@ -439,3 +439,30 @@ $price-color: #37ae2a;
   0%    { transform: rotate(0deg); }
   100%  { transform: rotate(360deg); }
 }
+
+// Mobile overflow optimizations for long lists/tables.
+@include media-breakpoint-down(sm) {
+  .card .table,
+  .table {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+  }
+
+  .list-group-item,
+  .list-group-item p,
+  .list-group-item span,
+  .list-group-item code {
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+
+  .list-group-item .badge {
+    display: inline-flex;
+    max-width: 100%;
+    margin-bottom: 0.25rem;
+  }
+}