Sidebar redesign follow up

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div id="ff-app" class="min-h-screen flex flex-col" :class="{'hidden-left-drawer': hiddenLeftDrawer}">
+    <div id="ff-app" class="flex flex-col" :class="{'hidden-left-drawer': hiddenLeftDrawer}">
         <template v-if="offline">
             <main class="ff-bg-dark flex-grow flex flex-col">
                 <div class="w-full max-w-screen-2xl mx-auto my-2 sm:my-8 flex-grow flex flex-col">
@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 
 import Loading from './components/Loading.vue'
 import Offline from './components/Offline.vue'
@@ -123,22 +123,9 @@ export default {
             return ['platform', 'modal', 'plain'].includes(layout) ? layout : 'platform'
         }
     },
-    watch: {
-        hasFloatingLeftBar: {
-            handler: function (value) {
-                if (value) {
-                    this.closeLeftDrawer()
-                } else this.openLeftDrawer()
-            },
-            immediate: true
-        }
-    },
     mounted () {
         this.$store.dispatch('account/checkState')
         this.$store.dispatch('product/checkFlags')
-    },
-    methods: {
-        ...mapActions('ux', ['closeLeftDrawer', 'openLeftDrawer'])
     }
 }
 </script>

frontend/src/components/PageHeader.vue

@@ -2,7 +2,10 @@
     <div class="ff-header" data-sentry-unmask>
         <!-- Mobile: Toggle(Team & Team Admin Options) -->
         <i v-if="!hiddenLeftDrawer" class="ff-header--mobile-toggle">
-            <MenuIcon class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
+            <transition name="mobile-menu-fade" mode="out-in">
+                <MenuIcon v-if="!leftDrawer.state" class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
+                <XIcon v-else class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
+            </transition>
         </i>
         <!-- FlowFuse Logo -->
         <img class="ff-logo" src="/ff-logo--wordmark-caps--dark.png" @click="home()">
@@ -69,7 +72,7 @@
     </div>
 </template>
 <script>
-import { AcademicCapIcon, AdjustmentsIcon, CogIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, UserAddIcon } from '@heroicons/vue/solid'
+import { AcademicCapIcon, AdjustmentsIcon, CogIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, UserAddIcon, XIcon } from '@heroicons/vue/solid'
 import { ref } from 'vue'
 import { mapActions, mapGetters, mapState } from 'vuex'
 
@@ -147,6 +150,7 @@ export default {
         NavItem,
         'ff-team-selection': TeamSelection,
         MenuIcon,
+        XIcon,
         UserAddIcon,
         NotificationsButton
     },

frontend/src/components/drawers/LeftDrawer.vue

@@ -1,5 +1,10 @@
 <template>
-    <section id="left-drawer" data-el="left-drawer" :class="{active: leftDrawer.state}">
+    <section
+        id="left-drawer"
+        v-click-outside="{handler: handleClickOutside, exclude: ['left-drawer']}"
+        data-el="left-drawer"
+        :class="{active: leftDrawer.state}"
+    >
         <Transition type="transition" mode="out-in" name="fade">
             <component :is="leftDrawer.component" v-if="leftDrawer.component" :key="leftDrawer.component.name" />
         </Transition>
@@ -21,7 +26,10 @@ export default {
         this.setLeftDrawer(markRaw(MainNav))
     },
     methods: {
-        ...mapActions('ux', ['setLeftDrawer'])
+        ...mapActions('ux', ['setLeftDrawer', 'closeLeftDrawer']),
+        handleClickOutside () {
+            this.$nextTick(() => this.closeLeftDrawer)
+        }
     }
 }
 </script>

frontend/src/components/drawers/navigation/MainNav.vue

@@ -11,7 +11,7 @@
                             :to="entry.to"
                             :data-nav="entry.tag"
                             :class="{ disabled: entry.disabled }"
-                            @click="$emit('option-selected')"
+                            @click="onMenuItemClick"
                         >
                             <nav-item
                                 :label="entry.label"
@@ -115,7 +115,10 @@ export default {
         }
     },
     methods: {
-        ...mapActions('ux', ['setMainNavContext', 'setMainNavBackButton'])
+        ...mapActions('ux', ['setMainNavContext', 'setMainNavBackButton']),
+        onMenuItemClick () {
+            this.$store.dispatch('ux/closeLeftDrawer')
+        }
     }
 }
 </script>

frontend/src/stylesheets/common.scss

@@ -5,7 +5,12 @@
 @import "./animations.scss";
 @import "./components/charts.scss";
 
+html, body, #app {
+    height: 100%;
+}
+
 #ff-app {
+    height: 100%;
     background-color: $ff-grey-300;
 }
 

frontend/src/stylesheets/layouts.scss

@@ -21,6 +21,7 @@ $nav_height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100%;
     min-height: inherit;
     background-image: url("./images/ff-flow-bg-white.svg");
     background-size: contain;

frontend/src/stylesheets/transitions.scss

@@ -6,4 +6,15 @@
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
-}
+}
+
+
+.mobile-menu-fade-enter-active,
+.mobile-menu-fade-leave-active {
+  transition: opacity 0.1s ease-in;
+}
+
+.mobile-menu-fade-enter-from,
+.mobile-menu-fade-leave-to {
+  opacity: 0;
+}