From 66883ed6d0f48cac6d9debee246c720c253c6904 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sun, 10 Oct 2021 21:01:32 +0200
Subject: [PATCH] Fix sidebar bug

---
 .../integration/frontend/sidebar.spec.js      | 27 +++++++++++++++++++
 client/src/components/ContentBlock.vue        |  1 -
 client/src/components/HeaderBar.vue           | 17 ++++++------
 client/src/components/MobileHeader.vue        | 16 ++++++-----
 client/src/components/UserWidget.vue          | 27 +++----------------
 .../components/objective-groups/Objective.vue |  1 -
 .../src/components/profile/ProfileSidebar.vue |  1 +
 7 files changed, 50 insertions(+), 40 deletions(-)
 create mode 100644 client/cypress/integration/frontend/sidebar.spec.js

diff --git a/client/cypress/integration/frontend/sidebar.spec.js b/client/cypress/integration/frontend/sidebar.spec.js
new file mode 100644
index 00000000..b4802f59
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 519ae989..45eb6f63 100644
--- a/client/src/components/ContentBlock.vue
+++ b/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>
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 32600ecf..a69d6cd0 100644
--- a/client/src/components/HeaderBar.vue
+++ b/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"
-        @click="openSidebar('profile')">
-        <current-class class="user-header__current-class"/>
+        class="user-header__sidebar-link" >
+        <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/_mixins.scss";
+  @import "~styles/helpers";
 
   .header-bar {
     display: flex;
diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue
index 39ad6979..429a3ad9 100644
--- a/client/src/components/MobileHeader.vue
+++ b/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/_mixins.scss";
+  @import "~styles/helpers";
 
   .mobile-header {
     justify-content: space-between;
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 674d82c7..18d0edf5 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -4,43 +4,25 @@
     class="user-widget">
     <div
       class="user-widget__avatar"
-      data-cy="user-widget-avatar"
-      @click="openSidebar('profile')">
+      data-cy="user-widget-avatar">
       <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/_mixins.scss";
+  @import "~styles/helpers";
 
   .user-widget {
     color: $color-silver-dark;
diff --git a/client/src/components/objective-groups/Objective.vue b/client/src/components/objective-groups/Objective.vue
index f7723399..b115d810 100644
--- a/client/src/components/objective-groups/Objective.vue
+++ b/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>
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 0a853738..f57b6c03 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/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"