Update some event emitters

client/src/components/HeaderBar.vue

@@ -14,14 +14,14 @@
       >
         <current-class
           class="user-header__current-class"
-          @click.stop="openSidebar('profile')"
+          @click="openSidebar('profile')"
         />
       </a>
 
       <user-widget
         :avatar-url="me.avatarUrl"
         data-cy="header-user-widget"
-        @click.stop="openSidebar('profile')"
+        @click="openSidebar('profile')"
       />
     </div>
   </header>

client/src/components/UserWidget.vue

@@ -1,7 +1,17 @@
 <template>
-  <div :class="{ 'user-widget--is-profile': isProfile }" class="user-widget">
-    <div class="user-widget__avatar" data-cy="user-widget-avatar">
-      <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
+  <div
+    :class="{'user-widget--is-profile': isProfile}"
+    class="user-widget"
+    @click.stop="$emit('click', $event)"
+  >
+    <div
+      class="user-widget__avatar"
+      data-cy="user-widget-avatar"
+    >
+      <avatar
+        :avatar-url="avatarUrl"
+        :icon-highlighted="isProfile"
+      />
     </div>
   </div>
 </template>
@@ -12,23 +22,25 @@ import Avatar from '@/components/profile/Avatar';
   export default {
     props: {
       avatarUrl: {
-      type: String,
-    },
+        type: String
+      }
     },
 
+    emits: ['click'],
+
     components: {
-    Avatar,
+      Avatar
     },
     computed: {
       isProfile() {
         return this.$route.meta.isProfile;
-    },
-  },
+      }
+    }
   };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
   .user-widget {
     color: $color-silver-dark;

client/src/components/school-class/CurrentClass.vue

@@ -1,18 +1,23 @@
 <template>
-  <span class="current-class" data-cy="current-class-name">{{ currentClassName }}</span>
+  <span
+    class="current-class"
+    data-cy="current-class-name"
+    @click.stop="$emit('click', $event)"
+  >{{ currentClassName }}</span>
 </template>
 
 <script>
   import me from '@/mixins/me';
 
   export default {
+    emits: ['click'],
     mixins: [me],
   };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .current-class {
     display: flex;

client/src/directives/click-outside.ts

@@ -7,6 +7,29 @@ declare global {
   }
 }
 
+/*
+  todo:
+   there is a special interaction with nested elements where the parent has a @click event:
+   the parent triggers the event, something happens, but the click event bubbles to the child element.
+   If the event is then used to open some kind of sidebar or modal that has the `click-outside` propert, t
+   he bubbled event will be outside of it, thereby closing it.
+
+   example:
+   <div
+    class="sidebar"
+    v-if="showSidebar"
+    v-click-outside="showSidebar=false"
+   >
+   ...
+   </div>
+
+   <a class="sidebar-toggle" @click="showSidebar=true">
+     <span>Hello</span>
+   </a>
+
+  FIX:
+   In this example, setting the event on the a-tag as `@click.stop` will solve the problem
+ */
 export default {
   unmounted(el: HTMLElement) {
     document.body.removeEventListener('click', el.clickOutsideEvent);