Side menu interaction added, condition of use moved.

src/App.vue

@@ -1,55 +1,54 @@
 <template>
   <v-app>
     <div class="m-0 flex flex-column h-screen">
-
-      <Header class="fixed w-full z-40 top-0 p-2">
-      </Header>
-
-      <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">
+      <Header @toggle-sidebar="toggleSidebar" class="fixed w-full z-50 top-0 p-2"></Header>
+      <div class="flex flex-row relative">       
+        <div
+            @mouseenter="openSidebar"
+            class="fixed left-0 top-0 h-full w-12 z-20"
+            style="background: transparent;"
+        ></div>
+        
+        <transition name="slide-fade">
+          <div v-show="!hideSideBar"
+               @mouseleave="startCloseSidebarTimer"
+               @mouseenter="clearCloseSidebarTimer"
+               class="w-48 fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
+            <SideBar></SideBar>
+          </div>
+        </transition>
+        
+        <div class="flex flex-col mt-16 bg-amber-50 w-full md:ml-1">
           <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
+            v-if="showPopup"
+            ref="popup"
+            class="z-50 shadow-md shadow-gray-500 rounded-2xl"
+        >
           <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
             Je Soutiens!
           </div>
-
           <div class="bg-gray-100 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-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
-             style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white; ">
+        <div
+            @click="togglePopup"
+            ref="popupButton"
+            class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
+            style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
+        >
           <v-icon class="text-2xl">mdi-gift-outline</v-icon>
         </div>
-
-
       </div>
-
     </div>
   </v-app>
 </template>
@@ -58,40 +57,76 @@
 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 {ref, onMounted, onUnmounted} from 'vue';
 import StripePayment from "@/views/StripePayment.vue";
+import {eventBus} from '@/eventBus.js';
 
-const route = useRoute()
-const hideSideBar = computed(() => route.meta.hideSideBar === true)
-
-// Reactive variable to control the visibility of the popup
+const hideSideBar = ref(false); 
 const showPopup = ref(false);
 const popup = ref(null);
 const popupButton = ref(null);
+let closeSidebarTimer = null;
 
-// Function to toggle the popup visibility
-const togglePopup = () => {
-  showPopup.value = !showPopup.value
+const toggleSidebar = () => {
+  hideSideBar.value = !hideSideBar.value;
+};
+
+const openSidebar = () => {
+  clearCloseSidebarTimer();
+  hideSideBar.value = false;
+};
+
+const startCloseSidebarTimer = () => {
+  closeSidebarTimer = setTimeout(() => {
+    hideSideBar.value = true;
+  }, 500); 
+};
+
+const clearCloseSidebarTimer = () => {
+  clearTimeout(closeSidebarTimer);
+};
+
+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)) {
+  if (
+      popup.value &&
+      !popup.value.contains(event.target) &&
+      !popupButton.value.contains(event.target) &&
+      !event.target.closest('.bg-purple')
+  ) {
     showPopup.value = false;
   }
+  if (
+      !event.target.closest('.w-48') &&
+      !event.target.closest('.v-app-bar-nav-icon')
+  ) {
+    hideSideBar.value = true;
+  }
 };
 
-// Add event listener for clicks outside the popup when component is mounted
 onMounted(() => {
   document.addEventListener('click', handleClickOutside);
+  eventBus.value.toggleSidebar = toggleSidebar;
 });
 
-// Remove event listener when component is unmounted
 onUnmounted(() => {
   document.removeEventListener('click', handleClickOutside);
+  eventBus.value.toggleSidebar = null;
 });
-
 </script>
+
+<style scoped>
+/* Do not remove. Used for animation */
+.slide-fade-enter-active, .slide-fade-leave-active {
+  transition: transform 0.7s ease, opacity 0.7s ease;
+}
+
+.slide-fade-enter, .slide-fade-leave-to 
+{
+  transform: translateX(-100%);
+  opacity: 0;
+}
+</style>