Fix Sidebar menu on mobile RTL

Fix collapsable menu on mobile

src/App.vue

@@ -1,23 +1,28 @@
 <template>
-  <div :class="{'nav-open': $sidebar.showSidebar}">
+  <div>
     <notifications></notifications>
     <router-view :key="$route.fullPath"></router-view>
   </div>
 </template>
 
 <script>
-export default {
+  export default {
-  methods: {
+    methods: {
-    disableRTL() {
+      disableRTL() {
-      if(!this.$rtl.isRTL) {
+        if (!this.$rtl.isRTL) {
-        this.$rtl.disableRTL();
+          this.$rtl.disableRTL();
+        }
+      },
+      toggleNavOpen() {
+        let root = document.getElementsByTagName('html')[0];
+        root.classList.toggle('nav-open');
       }
+    },
+    mounted() {
+      this.$watch('$route', this.disableRTL, { immediate: true });
+      this.$watch('$sidebar.showSidebar', this.toggleNavOpen)
     }
-  },
+  };
-  mounted() {
-    this.$watch('$route', this.disableRTL, {immediate: true});
-  }
-};
 </script>
 
 <style lang="scss"></style>

src/layout/dashboard/TopNavbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent"
+  <nav class="navbar navbar-expand-lg navbar-absolute"
        :class="{'bg-white': showMenu}">
     <div class="container-fluid">
       <div class="navbar-wrapper">