Add popover to room entry

client/src/components/rooms/RoomEntry.vue

@@ -1,5 +1,17 @@
 <template>
-  <router-link :to="{name: 'article', params: { slug: slug }}" tag="div" class="room-entry">
+  <div class="room-entry">
+    <div class="room-entry__more">
+      <a @click="showMenu = !showMenu" class="room-entry__more-link">
+        <ellipses class="room-entry__ellipses"></ellipses>
+      </a>
+      <widget-popover entity="Eintrag"
+                      @delete="deleteRoomEntry"
+                      @hide-me="showMenu = false"
+                      :id="id"
+                      class="room-entry__popover"
+                      v-if="showMenu"></widget-popover>
+    </div>
+    <router-link :to="{name: 'article', params: { slug: slug }}" tag="div" class="room-entry__router-link">
       <div class="room-entry__header" v-if="image">
         <img class="room-entry__image" :src="image" :alt="title">
       </div>
@@ -11,16 +23,27 @@
         <user-widget class="room-entry__author" v-bind="author"></user-widget>
       </div>
     </router-link>
+  </div>
+
 </template>
 
 <script>
   import UserWidget from '@/components/UserWidget.vue';
+  import Ellipses from '@/components/icons/Ellipses.vue';
+  import WidgetPopover from '@/components/rooms/WidgetPopover';
 
   export default {
-    props: ['title', 'author', 'contents', 'slug'],
+    props: ['title', 'author', 'contents', 'slug', 'id'],
 
     components: {
-      UserWidget
+      UserWidget,
+      Ellipses,
+      WidgetPopover
+    },
+
+    methods: {
+      deleteRoomEntry() {
+      }
     },
 
     computed: {
@@ -48,8 +71,13 @@
         }
         return '';
       }
-    }
+    },
 
+    data() {
+      return {
+        showMenu: false
+      }
+    }
   }
 </script>
 
@@ -66,6 +94,7 @@
     break-inside: avoid; /* IE 10+ */
     margin-bottom: 25px;
     cursor: pointer;
+    position: relative;
 
     &__image {
       max-width: 100%;
@@ -85,5 +114,24 @@
       margin-bottom: 10px;
     }
 
+    &__ellipses {
+      width: 30px;
+      fill: $color-darkgrey-1;
+    }
+
+    &__more {
+      position: absolute;
+      top: 5px;
+      right: 10px;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    &__more-link {
+    }
+
+    &__popover {
+      width: 180px;
+    }
   }
 </style>