Merge pull request #126 from fleetbase/feature/mobile-sidebar-service-sync

Fix mobile navbar sidebar state sync

Author: roncodes

addon/components/layout/mobile-navbar.hbs

@@ -1,5 +1,5 @@
 {{#if (media "isMobile")}}
-    <div class="next-mobile-navbar" {{did-insert this.setupMobileNavbar}} ...attributes>
+    <div class="next-mobile-navbar" ...attributes>
         <div role="menubar" class="next-mobile-navbar-tabs">
             <div role="menu" class="scrollable-nav-items">
                 {{#each this.menuItems as |menuItem|}}

addon/components/layout/mobile-navbar.js

@@ -7,17 +7,23 @@ import { action } from '@ember/object';
 export default class LayoutMobileNavbarComponent extends Component {
     @service router;
     @service hostRouter;
+    @service sidebar;
     @service abilities;
     @service universe;
-    @tracked navbarNode;
-    @tracked sidebarNode;
     @tracked extensions = [];
     @tracked menuItems = [];
+    routeDidChangeHandler = null;
 
     constructor(owner, { menuItems = [] }) {
         super(...arguments);
         this.extensions = getOwner(this).application.extensions ?? [];
         this.menuItems = this.mergeMenuItems(menuItems);
+        this.routeDidChangeHandler = () => this.closeSidebar();
+        this.getRouter().on('routeDidChange', this.routeDidChangeHandler);
+
+        if (typeof this.args.onSetup === 'function') {
+            this.args.onSetup(this);
+        }
     }
 
     mergeMenuItems(menuItems = []) {
@@ -41,44 +47,37 @@ export default class LayoutMobileNavbarComponent extends Component {
         return visibleMenuItems;
     }
 
-    @action setupMobileNavbar(element) {
-        this.navbarNode = element;
-        this.sidebarNode = element.previousElementSibling.querySelector('nav.next-sidebar');
-
-        if (typeof this.args.onSetup === 'function') {
-            this.onSetup(this);
+    @action async routeTo(route) {
+        try {
+            await this.getRouter().transitionTo(route);
+            this.closeSidebar();
+        } catch (error) {
+            void error;
         }
-
-        // when hostrouter transitions close sidebar automatically
-        this.getRouter().on('routeDidChange', this.closeSidebar.bind(this));
-    }
-
-    @action routeTo(route) {
-        this.getRouter()
-            .transitionTo(route)
-            .then(() => {
-                this.closeSidebar();
-            });
     }
 
     @action toggleSidebar() {
-        if (this.isSidebarOpen()) {
-            this.closeSidebar();
-        } else {
-            this.openSidebar();
-        }
+        this.sidebar.toggle();
     }
 
     @action isSidebarOpen() {
-        return this.sidebarNode?.classList?.contains('is-open');
+        return this.sidebar.isVisible;
     }
 
     @action closeSidebar() {
-        this.sidebarNode?.classList?.remove('is-open');
+        this.sidebar.hide();
     }
 
     @action openSidebar() {
-        this.sidebarNode?.classList?.add('is-open');
+        this.sidebar.show();
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        if (this.routeDidChangeHandler) {
+            this.getRouter().off('routeDidChange', this.routeDidChangeHandler);
+            this.routeDidChangeHandler = null;
+        }
     }
 
     getRouter() {

addon/styles/layout/mobile.css

@@ -11,7 +11,8 @@
         @apply transition duration-500 ease-in-out;
     }
 
-    .next-sidebar.is-open {
+    .next-sidebar:not(.sidebar-hidden, .sidebar-hide),
+    .next-sidebar.sidebar-minimized {
         @apply opacity-100;
         transform: translateX(0px);
     }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.27",
+    "version": "0.3.28",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",