Side menu interaction added, condition of use moved.
This commit is contained in:
PascalMarchesseault
115
src/App.vue
115
src/App.vue
@@ -1,55 +1,54 @@
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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">
|
||||
<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"
|
||||
<div
|
||||
v-if="showPopup"
|
||||
ref="popup"
|
||||
class="z-50 shadow-md shadow-gray-500 rounded-2xl">
|
||||
|
||||
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"
|
||||
<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; ">
|
||||
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>
|
||||
|
||||
3
src/eventBus.js
Normal file
3
src/eventBus.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
export const eventBus = ref({});
|
||||
@@ -1,33 +1,25 @@
|
||||
<template>
|
||||
|
||||
<header class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20">
|
||||
|
||||
<div v-if="showPopup"
|
||||
ref="popupRef"
|
||||
class="bg-white shadow-md shadow-gray-700 top-14 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
|
||||
@mouseleave="handleMouseLeave"
|
||||
@mouseenter="handleMouseEnter">
|
||||
<SiteMenu></SiteMenu>
|
||||
</div>
|
||||
|
||||
<header
|
||||
class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20"
|
||||
@click.stop
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer">
|
||||
<v-app-bar-nav-icon @click.stop="toggleSidebar">
|
||||
</v-app-bar-nav-icon>
|
||||
|
||||
<RouterLink to="/">
|
||||
<v-img src="/medias/hutopy.png"
|
||||
<v-img
|
||||
src="/medias/hutopy.png"
|
||||
ref="popupButtonRef"
|
||||
alt="Hutopy Logo"
|
||||
class="mr-2 h-10 w-20"
|
||||
@mouseenter="togglePopup(true)">
|
||||
</v-img>
|
||||
></v-img>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center">
|
||||
<v-text-field
|
||||
density=compact
|
||||
density="compact"
|
||||
rounded
|
||||
variant="outlined"
|
||||
v-model="searchQuery"
|
||||
@@ -36,94 +28,47 @@
|
||||
clearable
|
||||
class="rounded-full mx-2 w-80"
|
||||
append-inner-icon="mdi-magnify"
|
||||
@click:append-inner="onSearch">
|
||||
</v-text-field>
|
||||
@click:append-inner="onSearch"
|
||||
></v-text-field>
|
||||
|
||||
<v-icon class="mx-2">mdi-bell-outline</v-icon>
|
||||
|
||||
<span class="flex items-center mx-2">
|
||||
|
||||
<span class="text-black text-base font-sans font-medium mr-3">
|
||||
{{ currentUserName }}
|
||||
</span>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
<img
|
||||
src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
class="rounded-circle h-10 w-10"
|
||||
alt="Logo"/>
|
||||
alt="Logo"
|
||||
/>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted, onUnmounted} from 'vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
import SiteMenu from "@/views/main/SiteMenu.vue";
|
||||
import { ref } from "vue";
|
||||
import { eventBus } from '@/eventBus.js';
|
||||
|
||||
const currentUserName = "Jo Bumble";
|
||||
const searchQuery = ref("");
|
||||
|
||||
const showPopup = ref(false);
|
||||
const popupRef = ref(null);
|
||||
const popupButtonRef = ref(null);
|
||||
let mouseLeaveTimeout = null;
|
||||
|
||||
const togglePopup = (state) => {
|
||||
clearTimeout(mouseLeaveTimeout)
|
||||
showPopup.value = state
|
||||
const toggleSidebar = () => {
|
||||
eventBus.value.toggleSidebar();
|
||||
};
|
||||
|
||||
// Function to handle mouse enter event
|
||||
const handleMouseEnter = () => {
|
||||
clearTimeout(mouseLeaveTimeout);
|
||||
};
|
||||
|
||||
// Function to handle mouse leave event
|
||||
const handleMouseLeave = () => {
|
||||
mouseLeaveTimeout = setTimeout(() => {
|
||||
showPopup.value = false;
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
// Function to handle clicks outside the popup
|
||||
const handleClickOutside = (event) => {
|
||||
if (popupRef.value
|
||||
&& !popupRef.value.contains(event.target)
|
||||
&& popupButtonRef.value
|
||||
&& !popupButtonRef.value.contains(event.target)) {
|
||||
showPopup.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const currentUserName = 'Jo Bumble'
|
||||
const searchQuery = ref('');
|
||||
const router = useRouter();
|
||||
|
||||
const onSearch = () => {
|
||||
const query = searchQuery.value.trim();
|
||||
|
||||
if (!query) {
|
||||
router.push('/browse');
|
||||
router.push("/browse");
|
||||
} else {
|
||||
const words = query.split(' ');
|
||||
|
||||
const words = query.split(" ");
|
||||
if (words.length === 1) {
|
||||
router.push(`/@${words[0]}`);
|
||||
} else {
|
||||
router.push({name: 'browse', query: {q: query}});
|
||||
router.push({ name: "browse", query: { q: query } });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<aside class="relative">
|
||||
|
||||
<aside>
|
||||
<nav class="flex items-center justify-between pt-3">
|
||||
|
||||
<nav>
|
||||
|
||||
<h2>Subscriptions</h2>
|
||||
<div>
|
||||
<h2 class="text-center">Subscriptions</h2>
|
||||
|
||||
<ul class="space-y-32">
|
||||
<li>
|
||||
@@ -52,27 +52,34 @@
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<SiteMenu></SiteMenu>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.nav-button {
|
||||
@apply bg-purple-800 rounded p-1 m-2
|
||||
@apply bg-purple-800 rounded p-1 m-2;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@apply bg-purple-400
|
||||
@apply bg-purple-400;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply font-sans font-bold ml-2
|
||||
@apply font-sans font-bold ml-2;
|
||||
}
|
||||
|
||||
aside {
|
||||
@apply relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SiteMenu from "@/views/main/SiteMenu.vue";
|
||||
</script>
|
||||
@@ -1,81 +1,50 @@
|
||||
<template>
|
||||
|
||||
<div class="flex flex-column py-4 px-8">
|
||||
|
||||
<div class="flex flex-row self-center pb-4 pt-2">
|
||||
|
||||
<div class="flex flex-col min-h-screen bg-white py-4 px-8">
|
||||
<RouterLink class="nav-button font-weight-bold" to="/join">Aidez-nous</RouterLink>
|
||||
<div class="flex flex-row justify-center pb-4 pt-2">
|
||||
<!-- Facebook -->
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<img src="/images/hutopymedia/icons/pink/facebookpink.png"
|
||||
alt="Facebook Logo">
|
||||
<img src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Facebook Logo">
|
||||
</a>
|
||||
|
||||
<!-- Instagram -->
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<img src="/images/hutopymedia/icons/pink/instagrampink.png"
|
||||
alt="Instagram Logo">
|
||||
<img src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Instagram Logo">
|
||||
</a>
|
||||
|
||||
<!-- X / Twitter -->
|
||||
<a href="https://twitter.com/Hutopyinc">
|
||||
<img src="/images/hutopymedia/icons/pink/xpink.png"
|
||||
alt="X Logo">
|
||||
<img src="/images/hutopymedia/icons/pink/xpink.png" alt="X Logo">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="absolute mt-44 text-center extra-small-text p-2">
|
||||
<RouterLink class="nav-button" to="/helpandcontact">Aide & Contact</RouterLink>
|
||||
<RouterLink class="nav-button" to="/faq">FAQ</RouterLink>
|
||||
<RouterLink class="nav-button" to="/guideforcreators">Guide pour les créateurs</RouterLink>
|
||||
<RouterLink class="nav-button" to="/termsandconditions">Conditions générales</RouterLink>
|
||||
<RouterLink class="nav-button" to="/contentpolicy">Politique de Contenu</RouterLink>
|
||||
<RouterLink class="nav-button" to="/about">À Propos</RouterLink>
|
||||
<RouterLink class="nav-button" to="/pricing">Frais</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1">
|
||||
|
||||
<RouterLink class="nav-button" to="/join">
|
||||
Aidez-nous
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/helpandcontact">
|
||||
Aide & Contact
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/faq">
|
||||
FAQ
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/guideforcreators">
|
||||
Guide pour les créateurs
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/termsandconditions">
|
||||
Conditions générales
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/contentpolicy">
|
||||
Politique de Contenu
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/about">
|
||||
À Propos
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink class="nav-button" to="/pricing">
|
||||
Frais
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.nav-button {
|
||||
@apply rounded m-1 flex justify-center font-sans
|
||||
@apply rounded flex justify-center font-sans text-gray-800 py-1;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@apply text-purple-800 bg-gray-50
|
||||
@apply text-purple-800 bg-gray-50;
|
||||
}
|
||||
|
||||
img {
|
||||
@apply m-2 w-10 h-10
|
||||
@apply m-2 w-10 h-10;
|
||||
}
|
||||
|
||||
.extra-small-text {
|
||||
font-size: 0.6rem; /* Ajustez cette valeur selon vos besoins */
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<!-- Bannière-->
|
||||
<div class="z-20">
|
||||
<div class="relative bottom-4 z-20 m">
|
||||
<div class="relative flex flex-col">
|
||||
<!-- Social Network-->
|
||||
<div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4">
|
||||
<div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
|
||||
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
|
||||
<div class="text-lg">1000+ Abonnés</div>
|
||||
<div class="text-sm">500 Contacts en commun</div>
|
||||
@@ -35,8 +35,9 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Banner & user info-->
|
||||
<div class="relative">
|
||||
<!--Banner-->
|
||||
@@ -55,17 +56,18 @@
|
||||
</div>
|
||||
|
||||
<!-- Actions Button & image profile -->
|
||||
<div class="w-full ">
|
||||
<div class="relative bottom-4 w-full">
|
||||
<div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
|
||||
<div class="flex flex-col sm:flex-row items-center sm:justify-between">
|
||||
<img
|
||||
class=" left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-30"
|
||||
class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
|
||||
:src="profilePicture"
|
||||
alt="Profile Picture"
|
||||
style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
|
||||
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
|
||||
<button
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
|
||||
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
|
||||
@click="isDialogActive = true">
|
||||
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
|
||||
</button>
|
||||
<button class="text-white py-2 px-4 rounded"
|
||||
@@ -88,22 +90,81 @@
|
||||
|
||||
<CreatorFeed></CreatorFeed>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--Post-modale-->
|
||||
<v-dialog v-model="isDialogActive" max-width="500">
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card class="text-center rounded-xl">
|
||||
<div class="text-white p-4 rounded-t" style="background-color: #110E0F">
|
||||
<h2>Publication</h2>
|
||||
</div>
|
||||
<v-card-text class="bg">
|
||||
<v-row class="justify-center mb-4">
|
||||
<v-col class="d-flex align-center justify-end">
|
||||
<v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
|
||||
</v-col>
|
||||
<v-col class="d-flex align-center justify-start">
|
||||
<v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
|
||||
<v-file-input
|
||||
label="Ajoutez des fichiers"
|
||||
v-model="files"
|
||||
outlined
|
||||
multiple
|
||||
dropzone
|
||||
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
|
||||
></v-file-input>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn color="primary" @click="publishPost">Publier</v-btn>
|
||||
<v-btn color="primary" @click="cancelPost">Annuler</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import CreatorFeed from "@/views/main/CreatorFeed.vue";
|
||||
import {ref} from 'vue';
|
||||
|
||||
let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
|
||||
let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
|
||||
let isDialogActive = ref(false);
|
||||
let message = ref('');
|
||||
let files = ref([]);
|
||||
let isArticle = ref(false);
|
||||
|
||||
const publishPost = () => {
|
||||
// Logic to publish post
|
||||
console.log('Post published:', message.value, files.value);
|
||||
isDialogActive.value = false;
|
||||
resetPostForm();
|
||||
};
|
||||
|
||||
const cancelPost = () => {
|
||||
isDialogActive.value = false;
|
||||
resetPostForm();
|
||||
};
|
||||
|
||||
const resetPostForm = () => {
|
||||
message.value = '';
|
||||
files.value = [];
|
||||
};
|
||||
|
||||
const togglePostType = (article) => {
|
||||
isArticle.value = article;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.shadow-lg {
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.v-btn--active {
|
||||
background-color: #1976D2;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user