fix: Fix Task Topbar Menu Style - Meeds-io/MIPs#160 (#447)

Prior to this change, the Tasks additional menu button isn't added in
the correct template slot of Drawer. This change ensures to display the
Task Menu in the correct slot. Without this change, the Drawer title
can't display an ellipsis on title, thus this is mandatory to fix
globally the Drawer Title Ellipsis Style.

webapps/src/main/webapp/vue-app/taskDrawer/components/TaskDrawer.vue

@@ -48,24 +48,6 @@
               @projectsListOpened="closePriority(); closeStatus(); closeLabelsList(); closeTaskDates();closeAssignements()" />
           </div>
         </div>
-        <div v-if="menuActions.length" id="taskActionMenu">
-          <i class="uiIcon uiThreeDotsIcon" @click="displayActionMenu = true"></i>
-          <v-menu
-            v-model="displayActionMenu"
-            :attach="'#taskActionMenu'"
-            transition="slide-x-reverse-transition"
-            content-class="taskActionMenu"
-            offset-y>
-            <v-list class="pa-0" dense>
-              <v-list-item v-for="menuAction in menuActions" :key="menuAction.title">
-                <v-list-item-title class="subtitle-2" @click="menuAction.action">
-                  <i :class="`uiIcon ${menuAction.uiIcon} pe-2`"></i>
-                  <span>{{ menuAction.title }}</span>
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </div>
       </template>
       <template v-else-if="drawer" slot="title">
         <div class="drawerTitleAndProject d-flex">
@@ -81,6 +63,41 @@
           </div>
         </div>
       </template>
+      <template
+        v-if="drawer && taskId && menuActions.length"
+        slot="titleIcons">
+        <div
+          id="taskActionMenu"
+          class="position-relative z-index-modal">
+          <v-menu
+            v-model="displayActionMenu"
+            :left="!$vuetify.rtl"
+            :right="$vuetify.rtl"
+            transition="slide-x-reverse-transition"
+            content-class="taskActionMenu z-index-modal"
+            offset-y
+            attach>
+            <template #activator>
+              <v-btn
+                icon
+                @click="displayActionMenu = true">
+                <v-icon size="18">fa-ellipsis-v</v-icon>
+              </v-btn>
+            </template>
+            <v-list class="pa-0 white" dense>
+              <v-list-item
+                v-for="menuAction in menuActions"
+                :key="menuAction.title"
+                @click="menuAction.action">
+                <v-list-item-title class="subtitle-2">
+                  <i :class="`uiIcon ${menuAction.uiIcon} pe-2`"></i>
+                  <span>{{ menuAction.title }}</span>
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+      </template>
       <template v-if="drawer" slot="content">
         <div class="taskDrawerDetails pa-4">
           <div class="taskTitleAndMark d-flex">