Merge pull request #4745 from FlowFuse/sidebar-redesign_left-drawer

Sidebar Re-design: Left Drawer
FlowFuse · Nov 11, 2024 · cb64b73 · cb64b73
2 parents ddbc002 + d05dbff
commit cb64b73
Show file tree

Hide file tree

Showing 30 changed files with 668 additions and 577 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="ff-app" class="min-h-screen flex flex-col">
+    <div id="ff-app" class="min-h-screen 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 { mapState } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 
 import Loading from './components/Loading.vue'
 import Offline from './components/Offline.vue'
@@ -88,6 +88,8 @@ export default {
     },
     computed: {
         ...mapState('account', ['pending', 'user', 'team', 'offline', 'settings']),
+        ...mapState('ux', ['leftDrawer']),
+        ...mapGetters('ux', ['hiddenLeftDrawer']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },
@@ -121,9 +123,22 @@ 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>

diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="ff-header" data-sentry-unmask>
         <!-- Mobile: Toggle(Team & Team Admin Options) -->
-        <i v-if="shouldDisplayMenuToggle" class="ff-header--mobile-toggle" :class="{'active': mobileMenuOpen}">
-            <MenuIcon class="ff-avatar" @click="$emit('menu-toggle')" />
+        <i v-if="!hiddenLeftDrawer" class="ff-header--mobile-toggle">
+            <MenuIcon class="ff-avatar cursor-pointer" @click="toggleLeftDrawer" />
         </i>
         <!-- FlowFuse Logo -->
         <img class="ff-logo" src="/ff-logo--wordmark-caps--dark.png" @click="home()">
@@ -84,17 +84,12 @@ import TeamSelection from './TeamSelection.vue'
 
 export default {
     name: 'NavBar',
-    props: {
-        mobileMenuOpen: {
-            type: Boolean
-        }
-    },
-    emits: ['menu-toggle'],
     mixins: [navigationMixin, permissionsMixin],
     computed: {
         ...mapState('account', ['user', 'team', 'teams']),
+        ...mapState('ux', ['leftDrawer']),
         ...mapGetters('account', ['notifications', 'hasAvailableTeams', 'defaultUserTeam', 'canCreateTeam', 'isTrialAccount']),
-        ...mapGetters('ux', ['shouldShowLeftMenu']),
+        ...mapGetters('ux', ['hiddenLeftDrawer']),
         navigationOptions () {
             return [
                 {
@@ -137,10 +132,7 @@ export default {
             ].filter(option => option !== undefined)
         },
         showInviteButton () {
-            return this.team && this.hasPermission('team:user:invite') && this.$route.name !== 'TeamMembers'
-        },
-        shouldDisplayMenuToggle () {
-            return this.shouldShowLeftMenu(this.$route)
+            return this.team && this.hasPermission('team:user:invite') && this.$route.name !== 'team-members-members'
         }
     },
     watch: {
@@ -172,6 +164,7 @@ export default {
         }
     },
     methods: {
+        ...mapActions('ux', ['toggleLeftDrawer']),
         to (route) {
             window.open(route.url, '_blank')
         },

diff --git a/frontend/src/components/SideNavigation.vue b/frontend/src/components/SideNavigation.vue
diff --git a/frontend/src/components/SideNavigationTeamOptions.vue b/frontend/src/components/SideNavigationTeamOptions.vue
diff --git a/frontend/src/components/drawers/LeftDrawer.vue b/frontend/src/components/drawers/LeftDrawer.vue
@@ -0,0 +1,34 @@
+<template>
+    <section id="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>
+    </section>
+</template>
+
+<script>
+import { markRaw } from 'vue'
+import { mapActions, mapState } from 'vuex'
+
+import MainNav from './navigation/MainNav.vue'
+
+export default {
+    name: 'LeftDrawer',
+    computed: {
+        ...mapState('ux', ['leftDrawer', 'mainNav'])
+    },
+    mounted () {
+        this.setLeftDrawer(markRaw(MainNav))
+    },
+    methods: {
+        ...mapActions('ux', ['setLeftDrawer'])
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .1s ease-in;
+}
+</style>