added the Filters button and popup

frontend/src/Apps/ScientificPublications/FilterComponent.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+
+
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, ()=>emit('modal-close'))
+
+</script>
+
+<template>
+  <div v-if="isOpen" class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container" ref="target">
+        <div class="modal-header">
+          <slot name="header"> default header </slot>
+        </div>
+        <div class="modal-body">
+          <slot name="content"> default content </slot>
+        </div>
+        <div class="modal-footer">
+          <slot name="footer">
+            <div>
+              <button @click.stop="emit('modal-close')">Submit</button>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.modal-container {
+  width: 300px;
+  margin: 150px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+</style>

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;