jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

we played with the colors and add wallet.vue

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-27 02:10:15 -04:00
parent 498cec3bb9
commit e6b2c71d54
9 changed files with 128 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.vue
View File

@@ -2,23 +2,23 @@
<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 class="flex flex-row relative">
<div
@mouseenter="openSidebar"
class="fixed left-0 top-0 h-full w-12 z-20"
class="fixed h-full w-12 z-20"
style="background: transparent;"
></div>
<transition name="slide-fade">
<div v-show="!hideSideBar"
@mouseleave="startCloseSidebarTimer"
@mouseenter="clearCloseSidebarTimer"
class=" fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
class=" fixed h-full min-w-60 border-r-2 bg-white z-30 transition-transform duration-700">
<SideBar></SideBar>
</div>
</transition>
<div class="flex flex-col mt-16 w-full md:ml-1" style="background-color: #f4f4f4">
<div class="flex flex-col w-full md:ml-1 mt-16" style="background-color: #f4f4f4">
<RouterView></RouterView>
<Footer></Footer>
</div>
@@ -61,7 +61,7 @@ import {ref, onMounted, onUnmounted} from 'vue';
import StripePayment from "@/views/StripePayment.vue";
import {eventBus} from '@/eventBus.js';
const hideSideBar = ref(false);
const hideSideBar = ref(false);
const showPopup = ref(false);
const popup = ref(null);
const popupButton = ref(null);
@@ -79,7 +79,7 @@ const openSidebar = () => {
const startCloseSidebarTimer = () => {
closeSidebarTimer = setTimeout(() => {
hideSideBar.value = true;
}, 500);
}, 500);
};
const clearCloseSidebarTimer = () => {
@@ -124,8 +124,7 @@ onUnmounted(() => {
transition: transform 0.7s ease, opacity 0.7s ease;
}
.slide-fade-enter, .slide-fade-leave-to
{
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(-100%);
opacity: 0;
}