Revert "hide the burgher menu and left menu for users without a team (no point in opening or showing an empty menu)"

This reverts commit 7348de3.

Author: cstns

frontend/src/components/NotificationsButton.vue

@@ -44,6 +44,7 @@ export default {
 .notifications-button-wrapper {
 
   .notifications-button {
+    border-left: 1px solid $ff-grey-500;
     color: white;
     display: flex;
     align-items: center;

frontend/src/components/PageHeader.vue

@@ -1,15 +1,14 @@
 <template>
     <div class="ff-header" data-sentry-unmask>
         <!-- Mobile: Toggle(Team & Team Admin Options) -->
-        <i v-if="team" class="ff-header--mobile-toggle" :class="{'active': mobileMenuOpen}">
+        <i class="ff-header--mobile-toggle" :class="{'active': mobileMenuOpen}">
             <MenuIcon class="ff-avatar" @click="$emit('menu-toggle')" />
         </i>
         <!-- FlowFuse Logo -->
         <img class="ff-logo" src="/ff-logo--wordmark-caps--dark.png" @click="home()">
         <!-- Mobile: Toggle(User Options) -->
-        <div class="flex ff-mobile-navigation-right">
-            <NotificationsButton class="ff-header--mobile-notificationstoggle" :class="{'active': mobileTeamSelectionOpen}" />
-            <i v-if="teams.length > 0" class="ff-header--mobile-usertoggle" :class="{'active': mobileTeamSelectionOpen}">
+        <div v-if="team" class="flex">
+            <i class="ff-header--mobile-usertoggle" :class="{'active': mobileTeamSelectionOpen}">
                 <img :src="team.avatar" class="ff-avatar" @click="mobileTeamSelectionOpen = !mobileTeamSelectionOpen">
             </i>
             <i class="ff-header--mobile-usertoggle" :class="{'active': mobileUserOptionsOpen}">
@@ -36,23 +35,17 @@
                 @click="mobileTeamSelectionOpen = false; $router.push({name: 'CreateTeam'})"
             />
         </div>
-        <div class="hidden lg:flex ff-desktop-navigation-right">
+        <div class="hidden lg:flex">
             <ff-team-selection data-action="team-selection" />
-            <div class="px-4 flex flex-col justify-center" v-if="showInviteButton">
+            <div class="px-4 flex flex-col justify-center ff-border-left" v-if="showInviteButton">
                 <ff-button kind="secondary" @click="inviteTeamMembers">
                     <template #icon-left><UserAddIcon /></template>
                     Invite Members
                 </ff-button>
             </div>
             <!-- Desktop: User Options -->
             <NotificationsButton />
-            <ff-dropdown
-                v-if="user"
-                class="ff-navigation ff-user-options hidden lg:flex xl:flex md:flex sm:flex"
-                options-align="right"
-                data-action="user-options"
-                data-cy="user-options"
-            >
+            <ff-dropdown v-if="user" class="ff-navigation ff-user-options" options-align="right" data-action="user-options" data-cy="user-options">
                 <template #placeholder>
                     <div class="ff-user">
                         <img :src="user.avatar" class="ff-avatar">

frontend/src/components/TeamSelection.vue

@@ -14,7 +14,7 @@
                 <ff-dropdown-option>
                     <nav-item v-for="t in teams" :key="t.id" :label="t.name" :avatar="t?.avatar" @click="selectTeam(t)" data-action="switch-team" />
                 </ff-dropdown-option>
-                <ff-dropdown-option v-if="canCreateTeam">
+                <ff-dropdown-option>
                     <nav-item label="Create New Team" :icon="plusIcon" @click="createTeam(t);" data-action="create-team" />
                 </ff-dropdown-option>
             </ul>
@@ -24,7 +24,7 @@
 
 <script>
 import { PlusIcon } from '@heroicons/vue/solid'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 
 import NavItem from './NavItem.vue'
 
@@ -35,15 +35,7 @@ export default {
         NavItem
     },
     computed: {
-        ...mapState('account', ['team', 'teams', 'settings']),
-        ...mapGetters('account', ['isAdminUser']),
-        canCreateTeam () {
-            if (this.isAdminUser) {
-                return true
-            }
-
-            return Object.prototype.hasOwnProperty.call(this.settings, 'team:create') && this.settings['team:create']
-        }
+        ...mapState('account', ['team', 'teams'])
     },
     data () {
         return {

frontend/src/layouts/Platform.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="ff-layout--platform">
         <PageHeader :mobileMenuOpen="mobileMenuOpen" @menu-toggle="toggleMenu" />
-        <div class="ff-layout--platform--wrapper" :class="{closed: !hasAvailableTeams}">
+        <div class="ff-layout--platform--wrapper">
             <div id="platform-sidenav" class="ff-navigation" :class="{'open': mobileMenuOpen}" data-sentry-unmask>
                 <!-- Each view uses a <Teleport> to fill this -->
             </div>
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 
 import InterviewPopup from '../components/InterviewPopup.vue'
 import PageHeader from '../components/PageHeader.vue'
@@ -55,8 +55,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('product', ['interview']),
-        ...mapGetters('account', ['hasAvailableTeams'])
+        ...mapState('product', ['interview'])
     },
     watch: {
         $route: function () {

frontend/src/pages/account/NoTeamsUser.vue

@@ -1,8 +1,8 @@
 <template>
-    <form class="py-8 text-center">
+    <form class="px-4 sm:px-6 lg:px-8 mt-4 space-y-4 text-center">
         <p class="text-gray-700 text-lg">You need to be in a team to create projects.</p>
         <p v-if="invitationCount === 0 && !user.admin && !settings['team:create']" class="text-gray-700 text-lg mt-10 ">Ask an Admin or Team Owner to add you to a team.</p>
-        <div class="pt-4 justify-center flex gap-5" :class="invitationCount > 0?'sm:grid-cols-2':'max-w-xs mx-auto'">
+        <div class="flex justify-center" :class="invitationCount > 0?'sm:grid-cols-2':'max-w-xs mx-auto'">
             <router-link v-if="user.admin || settings['team:create']" to="/team/create" class="forge-button-secondary p-4 sm:h-36 inline-flex sm:flex-col items-center sm:justify-center gap-4">
                 <UserGroupIcon class="w-10" />
                 Create a new team

frontend/src/store/account.js

@@ -94,8 +94,7 @@ const getters = {
     hasNotifications: (state, getters) => getters.notificationsCount > 0,
 
     teamInvitations: state => state.invitations,
-    teamInvitationsCount: state => state.invitations?.length || 0,
-    hasAvailableTeams: state => state.teams.length > 0
+    teamInvitationsCount: state => state.invitations?.length || 0
 }
 
 const mutations = {

frontend/src/stylesheets/layouts.scss

@@ -251,7 +251,7 @@ $nav_height: 60px;
     .ff-dropdown-options {
         position: absolute;
         min-width: $sidenav_width;
-        display: block;
+        display: none;
         z-index: 10;
         border-bottom: 0;
         max-height: initial;
@@ -344,7 +344,6 @@ $nav_height: 60px;
         padding: 16px;
         svg {
             fill: white;
-            min-width: 24px;
         }
         &.active {
             cursor: pointer;
@@ -355,7 +354,6 @@ $nav_height: 60px;
         padding: 16px;
         img {
             padding: 0;
-            min-width: 24px;
         }
         &.active {
             cursor: pointer;
@@ -394,19 +392,8 @@ $nav_height: 60px;
     .ff-navigation-right {
         height: 100%;
     }
-    .ff-desktop-navigation-right {
-        & > * {
-            border-left: 1px solid $ff-grey-500;
-        }
-    }
-    .ff-mobile-navigation-right {
-        img, 
-        button {
-            cursor: pointer;
-        }
-    }
     .ff-dropdown {
-        //display: none;
+        display: none;
         height: calc(#{$nav_height} - 2px);
         color: white;
         min-width: $sidenav_width;
@@ -419,10 +406,9 @@ $nav_height: 60px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border: none;
-            //border-width: 0 0 0 1px;
-            //border-color: $ff-grey-500;
-            //border-radius: 0;
+            border-width: 0 0 0 1px;
+            border-color: $ff-grey-500;
+            border-radius: 0;
             background-color: $ff-grey-800;
             &:hover {
                 background-color: $ff-grey-700;
@@ -459,10 +445,6 @@ $nav_height: 60px;
     .ff-user-options {
         width: auto;
         min-width: $nav_height;
-        
-        &.ff-navigation {
-            left: auto;
-        }
         .ff-dropdown-options {
             width: $sidenav_width;
         }
@@ -668,9 +650,6 @@ $nav_height: 60px;
     &.open {
         left: 0;
     }
-    &.closed {
-        left: -$sidenav_width;
-    }
     &.ff-navigation-right.open {
         left: initial;
         right: 0;
@@ -722,13 +701,6 @@ $nav_height: 60px;
     /* Platform */
     .ff-layout--platform--wrapper {
         grid-template-columns: $sidenav_width 1fr;
-        
-        &.closed {
-            grid-template-columns: 1fr;
-            #platform-sidenav {
-                display: none;
-            }
-        }
     }
     .ff-navigation {
         left: 0;
@@ -738,12 +710,14 @@ $nav_height: 60px;
         .ff-header--mobile-toggle {
             display: none;
         }
-        .ff-header--mobile-usertoggle,
-        .ff-header--mobile-notificationstoggle {
+        .ff-header--mobile-usertoggle {
             display: none;
         }
         img.ff-logo {
             padding: 16px;
         }
+        .ff-dropdown {
+            display: block;
+        }
     }
 }