Some changes

src/App.vue

@@ -1,11 +1,95 @@
 <template>
   <v-app>
-    <RouterView>
+    <div class="m-0 flex flex-column h-screen">
 
+      <Header class="fixed w-full z-40 top-0 p-2">
+      </Header>
 
-    </RouterView>
+      <div class="flex flex-row justify-center">
+
+        <div class="w-48 fixed left-0 top-16 h-full border-r-2 bg-purple z-30">
+
+          <SideBar v-if="!hideSideBar">
+          </SideBar>
+
+        </div>
+
+        <!-- TODO: Put this #F4F4F4 color into a style somewhere as SystemDefaultBackground or something similar -->
+        <div class="flex flex-col p-2 ml-48 mt-16 bg-amber-50">
+          <RouterView></RouterView>
+          <Footer></Footer>
+        </div>
+
+      </div>
+
+      <div class="fixed z-50 bottom-10 right-10 flex flex-column">
+
+        <div v-if="showPopup"
+             ref="popup"
+             class="z-50 shadow-md shadow-gray-500 rounded-2xl">
+
+          <div class="bg-purple-800 p-4 rounded-t-2xl font-semibold self-center">
+            Je Soutiens!
+          </div>
+
+          <div class="bg-purple-200 rounded-b-2xl p-4">
+            <div class="mx-2">
+              <StripePayment></StripePayment>
+            </div>
+          </div>
+
+        </div>
+
+        <div @click="togglePopup"
+             ref="popupButton"
+             class="bg-purple rounded-full w-10 h-10 flex justify-center items-center self-end mt-4 cursor-pointer">
+          <v-icon>mdi-plus</v-icon>
+        </div>
+
+      </div>
+
+    </div>
   </v-app>
 </template>
 
 <script setup>
+import Header from "@/views/main/Header.vue";
+import Footer from "@/views/main/Footer.vue";
+import SideBar from "@/views/main/SideBar.vue";
+import {useRoute} from 'vue-router'
+import {ref, onMounted, onUnmounted, computed} from 'vue';
+import StripePayment from "@/views/StripePayment.vue";
+
+const route = useRoute()
+const hideSideBar = computed(() => route.meta.hideSideBar === true)
+
+// Reactive variable to control the visibility of the popup
+const showPopup = ref(false);
+const popup = ref(null);
+const popupButton = ref(null);
+
+// Function to toggle the popup visibility
+const togglePopup = () => {
+  showPopup.value = !showPopup.value
+};
+
+// Function to handle clicks outside the popup
+const handleClickOutside = (event) => {
+  if (popup.value
+      && !popup.value.contains(event.target)
+      && !popupButton.value.contains(event.target)) {
+    showPopup.value = false;
+  }
+};
+
+// Add event listener for clicks outside the popup when component is mounted
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+// Remove event listener when component is unmounted
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
 </script>