Fix sidebar bug

client/cypress/integration/frontend/sidebar.spec.js

@@ -0,0 +1,27 @@
+import {getMinimalMe} from '../../support/helpers';
+
+describe('Sidebar', () => {
+  beforeEach(() => {
+    cy.setup();
+  });
+
+  it('should open sidebar and stay open', () => {
+    const operations = {
+      MeQuery: getMinimalMe({}),
+      ProjectsQuery: {
+        projects: []
+      }
+    };
+
+    cy.mockGraphqlOps({
+      operations
+    });
+
+    cy.visit('/portfolio');
+    cy.getByDataCy('sidebar').should('not.exist');
+    cy.getByDataCy('user-widget-avatar').click();
+    cy.getByDataCy('sidebar').should('exist');
+    cy.getByDataCy('close-profile-sidebar-link').click();
+    cy.getByDataCy('sidebar').should('not.exist');
+  });
+});

client/src/components/ContentBlock.vue

@@ -9,7 +9,6 @@
         class="block-actions"
         v-if="canEditContentBlock && editModule">
         <user-widget
-          :show-menu="false"
           v-bind="me"
           class="block-actions__user-widget content-block__user-widget"/>
         <more-options-widget>

client/src/components/HeaderBar.vue

@@ -3,20 +3,22 @@
     <a
       class="header-bar__sidebar-link"
       data-cy="open-sidebar-link"
-      @click="openSidebar('navigation')">
+      @click.stop="openSidebar('navigation')">
       <hamburger class="header-bar__sidebar-icon"/>
     </a>
     <content-navigation class="header-bar__content-navigation"/>
     <div class="user-header">
       <a
-        class="user-header__sidebar-link"
+        class="user-header__sidebar-link" >
-        @click="openSidebar('profile')">
+        <current-class
-        <current-class class="user-header__current-class"/>
+          class="user-header__current-class"
+          @click.native.stop="openSidebar('profile')"/>
       </a>
 
       <user-widget
         v-bind="me"
-        data-cy="header-user-widget"/>
+        data-cy="header-user-widget"
+        @click.native.stop="openSidebar('profile')"/>
     </div>
   </header>
 </template>
@@ -39,14 +41,13 @@
       UserWidget,
       Logo,
       CurrentClass,
-      Hamburger
+      Hamburger,
     },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .header-bar {
     display: flex;

client/src/components/MobileHeader.vue

@@ -10,7 +10,9 @@
       <logo/>
     </router-link>
 
-    <user-widget v-bind="me"/>
+    <user-widget
+      v-bind="me"
+      @click.native.stop="openSidebar('profile')"/>
   </div>
 </template>
 
@@ -20,27 +22,27 @@
   import UserWidget from '@/components/UserWidget';
 
   import me from '@/mixins/me';
+  import openSidebar from '@/mixins/open-sidebar';
 
   export default {
-    mixins: [me],
+    mixins: [me, openSidebar],
 
     components: {
       Logo,
       Hamburger,
-      UserWidget
+      UserWidget,
     },
 
     methods: {
       showMobileNavigation() {
         this.$store.dispatch('showMobileNavigation', true);
-      }
+      },
-    }
+    },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .mobile-header {
     justify-content: space-between;

client/src/components/UserWidget.vue

@@ -4,43 +4,25 @@
     class="user-widget">
     <div
       class="user-widget__avatar"
-      data-cy="user-widget-avatar"
+      data-cy="user-widget-avatar">
-      @click="openSidebar('profile')">
       <avatar
         :avatar-url="avatarUrl"
-        :icon-highlighted="isProfile"/>
+        :icon-highlighted="isProfile"
+      />
     </div>
   </div>
 </template>
 
 <script>
   import Avatar from '@/components/profile/Avatar';
-  import openSidebar from '@/mixins/open-sidebar';
 
   export default {
-    // todo: clean up unneeded props
     props: {
-      firstName: {
-        type: String
-      },
-      lastName: {
-        type: String
-      },
       avatarUrl: {
         type: String
-      },
-      mobile: {
-        type: Boolean,
-        default: false
-      },
-      showMenu: {
-        type: Boolean,
-        default: true
       }
     },
 
-    mixins: [openSidebar],
-
     components: {
       Avatar
     },
@@ -53,8 +35,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .user-widget {
     color: $color-silver-dark;

client/src/components/objective-groups/Objective.vue

@@ -11,7 +11,6 @@
       class="block-actions"
       v-if="editModule && canEdit">
       <user-widget
-        :show-menu="false"
         v-bind="me"
         class="block-actions__user-widget objective__user-widget"/>
       <more-options-widget>

client/src/components/profile/ProfileSidebar.vue

@@ -3,6 +3,7 @@
     <div
       v-click-outside="close"
       class="profile-sidebar"
+      data-cy="sidebar"
       v-if="sidebar.profile">
       <a
         class="profile-sidebar__close-link"