add shortscuts

add open/close action

src/menus/MenuContainer.vue

@@ -1,11 +1,22 @@
 <template>
-  <template v-if="display">
+  <template v-if="display && hasApps">
     <PageLoader v-if="hasPageLoader" />
-    <TopWideMenu v-if="display === 'big-menu'" />
-    <SideMenuWithCategories v-else-if="display === 'side-with-categories'" />
+    <TopWideMenu
+      v-if="display === 'big-menu'"
+      :open="isOpen"
+      @close="closeMenu"
+    />
+    <SideMenuWithCategories
+      v-else-if="display === 'side-with-categories'"
+      :open="isOpen"
+      @close="closeMenu"
+    />
     <SimpleSideMenu
       v-else-if="display === 'simple-side-menu'"
-      :alawayDisplayed="display === 'always-displayed'"
+      :open="isOpen"
+      @close="closeMenu"
+      @open="openMenu"
+      @toggle="toggleMenu(!isOpen)"
     />
   </template>
 </template>
@@ -13,6 +24,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useConfigStore } from '../store/config.js'
+import { useNavStore } from '../store/nav.js'
 import { createElement } from '../lib/dom.js'
 import { translate as t } from '@nextcloud/l10n'
 
@@ -23,9 +35,24 @@ import PageLoader from '../components/PageLoader'
 
 const config = ref(null)
 const configStore = useConfigStore()
+const navStore = useNavStore()
 const display = ref(null)
-const alawayDisplayed = ref(false)
 const hasPageLoader = ref(false)
+const isOpen = ref(false)
+const hasApps = ref(false)
+
+const toggleMenu = (value) => {
+  isOpen.value = value
+}
+
+const openMenu = () => {
+  toggleMenu(true)
+}
+
+const closeMenu = () => {
+  toggleMenu(false)
+}
+
 const createOpener = () => {
   const nextcloud = document.querySelector('#nextcloud')
   const logo = document.querySelector('.header-left .logo, .header-start .logo')
@@ -39,9 +66,9 @@ const createOpener = () => {
   }
 
   const opener = createElement('button', {
-    'class': 'side-menu-opener',
+    class: 'side-menu-opener',
     'arial-label': t('side_menu', 'Toggle the menu'),
-    'html': `<span>${t('side_menu', 'Toggle the menu')}</span>`
+    html: `<span>${t('side_menu', 'Toggle the menu')}</span>`,
   })
 
   if (config.value['opener-position'] === 'before') {
@@ -49,6 +76,8 @@ const createOpener = () => {
   } else {
     nextcloud.parentNode.insertBefore(opener, nextcloud.nextSibling)
   }
+
+  opener.addEventListener('click', () => toggleMenu(true), true)
 }
 
 const createLoader = () => {
@@ -69,6 +98,8 @@ const createLoader = () => {
 }
 
 onMounted(async () => {
+  hasApps.value = (await navStore.getApps()).length > 0
+
   config.value = await configStore.getConfig()
 
   if (config.value['big-menu']) {
@@ -77,11 +108,21 @@ onMounted(async () => {
     display.value = 'side-with-categories'
   } else {
     display.value = 'simple-side-menu'
-    alawayDisplayed.value = config.value['always-displayed']
   }
 
   hasPageLoader.value = config.value['loader-enabled']
 
-  createOpener()
+  if (hasApps.value) {
+    createOpener()
+  }
+
+  window.document.addEventListener('keydown', (e) => {
+    const key = e.key || e.keyCode
+
+    if ((key === 'o' || key === 79) && e.ctrlKey === true) {
+      e.preventDefault()
+      toggleMenu(!isOpen.value)
+    }
+  })
 })
 </script>