feat: add dropdown in RecentActivity component

client/src/components/Dropdown.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <!-- trigger -->
+    <div
+      @mouseenter="isOpen = true"
+      @mousemove="mousemove"
+      @mouseleave="isOpen = false"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+    >
+      <slot name="trigger"></slot>
+    </div>
+
+    <!-- dropdown content -->
+    <div
+      v-show="isOpen"
+      class="fixed z-40 bg-blue-1000 py-2 rounded-md shadow"
+      :style="{ width, ...position }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    openMethod: {
+      type: String,
+      default: 'click'
+    },
+    width: {
+      type: String,
+      default: 'auto'
+    }
+  },
+
+  data() {
+    return {
+      isOpen: false,
+      left: 0,
+      offset: 12,
+      top: 0
+    }
+  },
+
+  computed: {
+    position() {
+      return {
+        left: `${this.left + this.offset}px`,
+        top: `${this.top + this.offset}px`,
+      }
+    }
+  },
+
+  methods: {
+    mousemove(event) {
+      this.left = event.clientX
+      this.top = event.clientY
+    }
+  }
+}
+</script>

client/src/components/RecentActivity.vue

@@ -22,13 +22,22 @@
           class="ml-2 flex flex-col flex-wrap"
           style="width: calc(20px * 15); height: calc(20px * 7)"
         >
+          <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
+            <template v-slot:trigger>
               <div
-            v-for="(day, index) in gridDays.slice(indexFirstMonday)"
-            :key="day.timestamp"
-            :title="day.date + ' : ' + day.matches + ' game(s)'"
                 :class="[getCaseMargin(index), getCaseColor(day.matches)]"
                 class="ml-1 w-4 h-4 cursor-pointer"
               />
+            </template>
+            <template v-slot:default>
+              <div class="px-2 text-white text-center text-xs">
+                <div>{{ day.date }}</div>
+                <div>
+                  <span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)
+                </div>
+              </div>
+            </template>
+          </Dropdown>
         </div>
       </div>
     </div>
@@ -36,7 +45,13 @@
 </template>
 
 <script>
+import Dropdown from '@/components/Dropdown.vue'
+
 export default {
+  components: {
+    Dropdown,
+  },
+
   props: {
     matches: {
       type: Array,