Use inert to prevent hidden off canvas nav to be focussable, #1647

package.json

@@ -118,6 +118,7 @@
     ]
   },
   "dependencies": {
-    "deepmerge": "^4.0.0"
+    "deepmerge": "^4.0.0",
+    "inert-polyfill": "^0.2.5"
   }
 }

src/Phoenix.vue

@@ -12,6 +12,7 @@
   </div>
 </template>
 <script>
+import 'inert-polyfill'
 import { mapGetters, mapState, mapActions } from 'vuex'
 import TopBar from './components/Top-Bar.vue'
 import Menu from './components/Menu.vue'

src/components/Menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <oc-application-menu name="coreMenu" v-model="sidebarIsVisible" @close="sidebarIsVisible = false">
+  <oc-application-menu name="coreMenu" v-model="sidebarIsVisible" :inert="!sidebarIsVisible" @close="sidebarIsVisible = false" ref="sidebar">
     <oc-sidebar-nav-item v-for="(n, nid) in nav" :key="nid" :icon="n.iconMaterial" :target="n.route ? n.route.path : null" @click="openItem(n.url)">{{ translateMenu(n) }}</oc-sidebar-nav-item>
 
     <oc-sidebar-nav-item icon="account_circle" target="/account" :isolate="true">