add more app opener in mobile view (#359)

src/AppMenu.vue

@@ -23,7 +23,6 @@
 <template>
   <nav
     class="app-menu show"
-    ref="nav"
     :aria-label="t('core', 'Applications menu')"
   >
     <ul
@@ -31,7 +30,7 @@
       :class="{ 'app-menu-main__hidden-label': hiddenLabels === 1, 'app-menu-main__show-hovered': hiddenLabels === 2 }"
       v-if="appList.length"
       >
-      <li v-for="app in mainAppList"
+      <li v-for="app in mainAppList(state)"
         :key="app.id"
         :data-app-id="app.id"
         class="app-menu-entry"
@@ -51,8 +50,8 @@
         </a>
       </li>
     </ul>
-    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')" v-if="apps !== null">
+    <NcActions class="app-menu-more" :aria-label="t('core', 'More apps')">
-      <NcActionLink v-for="app in popoverAppList()"
+      <NcActionLink v-for="app in popoverAppList(state)"
         :key="app.id"
         :aria-label="appLabel(app)"
         :aria-current="app.active ? 'page' : false"
@@ -85,7 +84,6 @@ import { generateOcsUrl } from '@nextcloud/router'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 
-
 export default defineComponent({
   name: 'AppMenu',
 
@@ -106,31 +104,11 @@ export default defineComponent({
       appList: [],
       observer: null,
       targetBlankApps: [],
-      hiddenLabels: true
+      hiddenLabels: true,
+      state: 1,
     }
   },
 
-  computed: {
-    appLimit() {
-      const maxApps = Math.floor(this.$root.$el.offsetWidth / 50)
-
-      if (maxApps < this.appList.length) {
-        // Ensure there is space for the overflow menu
-        return Math.max(maxApps - 1, 0)
-      }
-
-      return maxApps
-    },
-
-    mainAppList() {
-      return this.appList.slice(0, this.appLimit)
-    },
-
-    popoverAppList() {
-      return this.appList.slice(this.appLimit)
-    },
-  },
-
   mounted() {
     axios.get(generateOcsUrl('core/navigation', 2) + '/apps?format=json')
 	  .then(({ data }) => {
@@ -140,6 +118,14 @@ export default defineComponent({
 
         this.setApps(data.ocs.data)
 	  })
+
+    let timeout = null
+
+    window.addEventListener('resize', () => {
+      timeout = window.setTimeout(() => {
+        this.update()
+      }, 300)
+    })
   },
 
   beforeDestroy() {
@@ -147,6 +133,29 @@ export default defineComponent({
   },
 
   methods: {
+    update() {
+      ++this.state
+    },
+
+    mainAppList() {
+      return this.appList.slice(0, this.appLimit())
+    },
+
+    popoverAppList() {
+      return this.appList.slice(this.appLimit())
+    },
+
+    appLimit() {
+      const maxApps = Math.floor(this.$root.$el.offsetWidth / 60)
+
+      if (maxApps < this.appList.length) {
+        // Ensure there is space for the overflow menu
+        return Math.max(maxApps - 1, 0)
+      }
+
+      return maxApps
+    },
+
     setNavigationCounter(id: string, counter: number) {
       const app = this.appList.find(({ app }) => app === id)
       if (app) {