Add an overlay when the app navigation is open

CHANGELOG.md

@@ -14,6 +14,8 @@
   [#1220](https://github.com/nextcloud/cookbook/pull/1220) @christianlupus
 - Fix filters for array-valued entries in recipes
   [#1222](https://github.com/nextcloud/cookbook/pull/1222) @christianlupus
+- Add overlay when app navigation is open
+  [1122](https://github.com/nextcloud/cookbook/pull/1122) @MarcelRobitaille
 
 ### Maintenance
 - Use the pre-built database images for MySQL and PostgreSQL tests
@@ -51,7 +53,7 @@
 ### Documentation
 - Defining new API interface to fix security issue
   [#1186](https://github.com/nextcloud/cookbook/pull/1186) @christianlupus
-- Fixed API description w.r.t. return types and examples 
+- Fixed API description w.r.t. return types and examples
   (see [#1153](https://github.com/nextcloud/cookbook/issues/1153)) @christianlupus
 
 ### Deprecated
@@ -207,7 +209,7 @@
   [#1055](https://github.com/nextcloud/cookbook/pull/1055) @christianlupus
 - Rewrite encoding of imported recipes
   [#1057](https://github.com/nextcloud/cookbook/pull/1057) @christianlupus
-  
+
 ### Fixed
 - Fix visual regression in edit mode to prevent overflow of breadcrumbs
   [#989](https://github.com/nextcloud/cookbook/pull/989) @christianlupus

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,13 +35,36 @@ 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) {
             console.log(this.$window.isSameBaseRoute(from.fullPath, to.fullPath))
         },
         */
     },
+    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>