fix name display

src/components/dropdown.vue

@@ -6,29 +6,32 @@
           class="ms-1"
           style="border: none; background-color:transparent"
           @click="toggleVisibility"
-          v-click-away="hideDropdown"
+
         >
         <slot name="start-button-item"> Start-button-content</slot>
       </button>
     </div>
     <Transition name="fade">
-      <ul v-if="isVisible" class="item-parent" :style="topMargin">
-        <li class="item" style="margin-right:var(--right-margin)">
-          <slot name="item-1"></slot>
-        </li>
-        <li class="item" style="margin-right:var(--left-margin)">
-          <slot name="item-2"></slot>
-        </li>
-      </ul>
+      <div class="item-container">
+        <ul v-if="isVisible" class="item-parent" :style="topMargin">
+          <li class="item" style="margin-right:var(--right-margin)">
+            <slot name="item-1"></slot>
+          </li>
+          <li class="item" style="margin-right:var(--left-margin)">
+            <slot name="item-2"></slot>
+          </li>
+        </ul>
+      </div>
+      
     </Transition>
   </div>
 </template>
 
 <script>
-import { mixin as VueClickAway } from "vue3-click-away";
+//import { mixin as VueClickAway } from "vue3-click-away";
 
 export default{
-  mixins: [VueClickAway],
+  //mixins: [VueClickAway],
   props:['type'],
   data(){
     return{
@@ -36,6 +39,7 @@ export default{
         top: 0,
         right: 0,
         left: 0,
+        // bgColor: 'transparent',
     }
   }, 
   methods: {
@@ -49,6 +53,7 @@ export default{
       if (this.type === "dropdownUser"){
         this.top = 2.08;
         this.right = 7.5;
+        // this.bgColor = "white";
       }
       else if (this.type === "addUser"){
         this.top = 10.25;
@@ -64,6 +69,7 @@ export default{
         '--top-margin': (this.top) + "rem",
         '--right-margin': (this.right) + "em",
         '--left-margin': (this.left) + "em"
+        // '--bg-color': (this.bgColor)
       }
     }
   }
@@ -90,10 +96,19 @@ export default{
     justify-content: space-between;
     align-items: baseline;
     top: var(--top-margin);
+    /* border: 1px;
+    border-color: black; */
+    
   }
   .item {
     position: absolute;
     list-style:none;
     width: 150px;
+    /* background-color: var(--bg-color); */
   }
+  /* .item-container {
+    display: flex;
+    border-color: black;
+    border-style: solid;
+  } */
 </style>
\ No newline at end of file

src/components/header.vue

@@ -28,12 +28,10 @@
         <div class="col">
           <div
             class="d-flex flex-row-reverse justify-content-start align-items-center illustration"
-          >
-            <h2 class="text-red" style="text-align: right">Hello, {{name}}</h2>
-            
+          > 
             <Dropdown type="dropdownUser">
               <template v-slot:start-button-item>
-                <i
+                <i @click="onDisplayName"
                   class="icon ion-ios-person-outline text-red"
                   style="font-size: 65px"
               ></i>
@@ -51,7 +49,7 @@
                 </button>
               </template>
             </Dropdown>
-
+            <Name v-if="isNameDisplayed" :value="this.name"></Name>
           </div>
         </div>
       </div>
@@ -63,12 +61,14 @@
 
 <script>
 import Dropdown from "../components/dropdown";
+import Name from "../components/name"
 import { HTTP } from '../http-common'
 
 export default {
   name: "Header",
   components: {
     Dropdown,
+    Name
   },
   data() {
     return {
@@ -76,7 +76,9 @@ export default {
       isModalVisible: false,
       profile_employee:[],
       profile_admin:[],
+      isNameDisplayed: true,
       name:"",
+      helloName:"",
       id: null,
       user_id: null,
       is_admin: false,
@@ -86,6 +88,9 @@ export default {
     onclick() {
       this.nav_active = !this.nav_active;
     },
+    onDisplayName(){
+      this.isNameDisplayed = !this.isNameDisplayed;
+    },
     toProfile(){
       if (this.is_admin){
         this.$router.push({ name: "profil-admin", params: { id: this.id }});
@@ -116,6 +121,7 @@ export default {
             this.user_id = this.profile_employee.user_id
           }
       }})
+      // console.log(this.isNameDisplayed)
     },
   },
   mounted(){

src/components/name.vue

 <template>
-    <h2 class="text-red" style="text-align: right">Hello, {{name}}</h2>
+    <h2 class="text-red" style="text-align: right">Hello, {{value}}</h2>
 </template>
 
 <script>
 
 export default {
     name: "Name",
-    props:{name: String},
+    props:{value: String},
 };
 </script>
\ No newline at end of file