133 lines
3.6 KiB
Vue
133 lines
3.6 KiB
Vue
<template>
|
|
<v-app>
|
|
<div class="m-0 flex flex-column h-screen">
|
|
<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 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;"
|
|
>
|
|
<v-icon class="text-2xl">mdi-gift-outline</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 {ref, onMounted, onUnmounted} from 'vue';
|
|
import StripePayment from "@/views/StripePayment.vue";
|
|
import {eventBus} from '@/eventBus.js';
|
|
|
|
const hideSideBar = ref(false);
|
|
const showPopup = ref(false);
|
|
const popup = ref(null);
|
|
const popupButton = ref(null);
|
|
let closeSidebarTimer = null;
|
|
|
|
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;
|
|
};
|
|
|
|
const handleClickOutside = (event) => {
|
|
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;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', handleClickOutside);
|
|
eventBus.value.toggleSidebar = toggleSidebar;
|
|
});
|
|
|
|
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>
|