added the Filters button and popup

frontend/src/Apps/ScientificPublications/ResearcherProfile.vue

@@ -7,17 +7,29 @@
 
 <script setup>
 import { ref, reactive } from "vue";
+import FilterComponent from "@/Apps/ScientificPublications/FilterComponent.vue";
 const input = ref("");
 const statsOf = ref("");
 const statsBy = ref("");
+const isFilterOpened = ref(false);
 let chart;
 
+const openModal = () => {
+  isFilterOpened.value = true;
+};
+const closeModal = () => {
+  isFilterOpened.value = false;
+};
+const submitHandler = ()=>{
+  //here you do whatever
+}
+
 const articleList = [
-    "First Article",
-    "The composition of the light",
-    "The composition of the sand",
-    "Fluctuation in universe beavers",
-    "The Potato War",
+  "First Article",
+  "The composition of the light",
+  "The composition of the sand",
+  "Fluctuation in universe beavers",
+  "The Potato War",
   "The Potato War",
   "The Potato War",
   "The Potato War",
@@ -66,7 +78,7 @@ function lDistance(s,t){
     }
   }
   return arr[t.length][s.length];
-};
+}
 
 const options = reactive({
     backgroundColor:null,
@@ -103,6 +115,9 @@ function update(){
 
 <template>
   <div id="main">
+    <FilterComponent :isOpen="isFilterOpened" @modal-close="closeModal" @submit="submitHandler" name="first-modal">
+      <template #header> Coucou </template>
+    </FilterComponent>
     <div id="profilePicture">
       <img src="/Clyde.png" />
     </div>
@@ -141,7 +156,10 @@ function update(){
       </div>
     </div>
     <div id="articles">
-      <input type="text" id="search-input" placeholder="search articles" v-model="input"/>
+      <div id="search">
+        <input type="text" id="search-input" placeholder="search articles" v-model="input"/>
+        <button id="filterButton" @click="openModal">  Filters </button>
+      </div>
       <ul id="articlesUL">
         <li id="articleLi" v-for="n in searchInList(articleList,input)">{{n}}</li>
       </ul>
@@ -196,23 +214,38 @@ function update(){
   font-size: large;
 }
 
-
 #statsPie {
 
 }
 
-#articles {
+#search{
+  width: 100%;
+  height: 10%;
+  display: inline-flex;
 }
-
 #search-input {
-  margin-left: 5px;
-  width: 60%;
+  margin-left: 25px;
+  width: 75%;
   font-size: 16px;
   padding: 12px 20px 12px 40px;
   border: 1px solid #ddd;
-  margin-bottom: 12px;
+  height: 20px;
+  align-self: center;
 }
 
+#filterButton {
+  align-self: center;
+  margin-left: 2px;
+  font-size: xx-large;
+  color: white;
+  background: rgba(191, 64, 191,0.5);
+  border:2px solid black;
+}
+#filterButton:hover{
+  background: rgba(191, 64, 191);
+}
+
+
 #articlesUL {
   list-style-type: none;
   color: white;