Add an overlay when the app navigation is open

Signed-off-by: Marcel Robitaille <mail@marcelrobitaille.me>

package-lock.json

@@ -10,6 +10,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@nextcloud/axios": "^2.0.0",
+        "@nextcloud/event-bus": "3.0.2",
         "@nextcloud/moment": "^1.1.1",
         "@nextcloud/router": "^2.0.0",
         "@nextcloud/vue": "^5.1.0",
@@ -680,9 +681,9 @@
       "integrity": "sha512-QUJ5wVL8iTZofgZjCfVnHxcMqqPPLfVfEKe8rfksMdmSmqEenpcpEBQO45VSSfng/tunwoLF+3I8rzEzVhYNLQ=="
     },
     "node_modules/@nextcloud/event-bus": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.0.tgz",
-      "integrity": "sha512-wtlVyE5CY8fnzrBws1j5zWAYiiGLylVghDkj4bGPa5NUdUXtD7QrRBb20GEW8sIn1s/TwaS7+DHGvRUUCjIJeg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.2.tgz",
+      "integrity": "sha512-svXCZa4UkoZKsBiGzTi0cVcbPFUOhCm7pMKjGumRwBvHywX+8by478IQ8Grw75PFHxajMJZ0KrOTTM8WnzzEAw==",
       "dependencies": {
         "semver": "^7.3.7"
       },
@@ -11214,9 +11215,9 @@
       }
     },
     "@nextcloud/event-bus": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.0.tgz",
-      "integrity": "sha512-wtlVyE5CY8fnzrBws1j5zWAYiiGLylVghDkj4bGPa5NUdUXtD7QrRBb20GEW8sIn1s/TwaS7+DHGvRUUCjIJeg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/event-bus/-/event-bus-3.0.2.tgz",
+      "integrity": "sha512-svXCZa4UkoZKsBiGzTi0cVcbPFUOhCm7pMKjGumRwBvHywX+8by478IQ8Grw75PFHxajMJZ0KrOTTM8WnzzEAw==",
       "requires": {
         "semver": "^7.3.7"
       },

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@nextcloud/axios": "^2.0.0",
+    "@nextcloud/event-bus": "3.0.2",
     "@nextcloud/moment": "^1.1.1",
     "@nextcloud/router": "^2.0.0",
     "@nextcloud/vue": "^5.1.0",

src/components/AppMain.vue

@@ -8,14 +8,22 @@
                     <router-view></router-view>
                 </div>
             </div>
+            <div
+                v-if="isMobile"
+                class="navigation-overlay"
+                :class="{ 'stay-open': isNavigationOpen }"
+                @click="closeNavigation"
+            />
         </AppContent>
     </Content>
 </template>
 
 <script>
+import isMobile from "@nextcloud/vue/dist/Mixins/isMobile"
 import AppContent from "@nextcloud/vue/dist/Components/AppContent"
 import Content from "@nextcloud/vue/dist/Components/Content"
 import AppControls from "cookbook/components/AppControls/AppControls.vue"
+import { emit, subscribe, unsubscribe } from "@nextcloud/event-bus"
 import AppNavi from "./AppNavi.vue"
 
 export default {
@@ -27,6 +35,12 @@ export default {
         // eslint-disable-next-line vue/no-reserved-component-names
         Content,
     },
+    mixins: [isMobile],
+    data() {
+        return {
+            isNavigationOpen: false,
+        }
+    },
     watch: {
         /* This is left here as an example in case the routes need to be debugged again
         '$route' (to, from) {
@@ -34,6 +48,23 @@ export default {
         },
         */
     },
+    mounted() {
+        subscribe("navigation-toggled", this.updateAppNavigationOpen)
+    },
+    unmounted() {
+        unsubscribe("navigation-toggled", this.updateAppNavigationOpen)
+    },
+    methods: {
+        /**
+         * Listen for event-bus events about the app navigation opening and closing
+         */
+        updateAppNavigationOpen({ open }) {
+            this.isNavigationOpen = open
+        },
+        closeNavigation() {
+            emit("toggle-navigation", { open: false })
+        },
+    },
 }
 </script>
 
@@ -47,6 +78,57 @@ export default {
     position: relative;
     z-index: 0;
 }
+
+/**
+ * The open event is only emitted when the animation stops
+ * In order to match their animation, we need to start fading in the overlay
+ * as soon as the .app-navigation--close` class goes away
+ * using a sibling selector
+ *
+ * We still need to listen for events to help us close the overlay.
+ * We cannot set `display: none` in an animation.
+ * We need to start fading out when the .app-navigation--close` class comes back,
+ * and use the close event that fired when the animation stops to reset
+ * `display: none`
+ */
+.navigation-overlay {
+    position: absolute;
+    /* Top bar has z-index 2 */
+    z-index: 3;
+    display: none;
+    animation: fade-out var(--animation-quick) forwards;
+    background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+    inset: 0;
+}
+
+.navigation-overlay.stay-open {
+    display: block;
+}
+
+#app-navigation-vue:not(.app-navigation--close)
+    + #app-content-vue
+    .navigation-overlay {
+    display: block;
+    animation: fade-in var(--animation-quick) forwards;
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
 </style>
 
 <style>