Side menu interaction added, condition of use moved.
This commit is contained in:
PascalMarchesseault
@@ -1,129 +1,74 @@
|
||||
<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"
|
||||
ref="popupButtonRef"
|
||||
alt="Hutopy Logo"
|
||||
class="mr-2 h-10 w-20"
|
||||
@mouseenter="togglePopup(true)">
|
||||
</v-img>
|
||||
<v-img
|
||||
src="/medias/hutopy.png"
|
||||
ref="popupButtonRef"
|
||||
alt="Hutopy Logo"
|
||||
class="mr-2 h-10 w-20"
|
||||
></v-img>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center">
|
||||
<v-text-field
|
||||
density=compact
|
||||
density="compact"
|
||||
rounded
|
||||
variant="outlined"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search"
|
||||
hide-details
|
||||
clearable
|
||||
class="rounded-full mx-2 w-80 "
|
||||
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"
|
||||
class="rounded-circle h-10 w-10"
|
||||
alt="Logo"/>
|
||||
</span>
|
||||
<span class="text-black text-base font-sans font-medium mr-3">
|
||||
{{ currentUserName }}
|
||||
</span>
|
||||
|
||||
<img
|
||||
src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
class="rounded-circle h-10 w-10"
|
||||
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,78 +1,85 @@
|
||||
<template>
|
||||
<aside class="relative">
|
||||
|
||||
<aside>
|
||||
|
||||
<nav>
|
||||
|
||||
<h2>Subscriptions</h2>
|
||||
<nav class="flex items-center justify-between pt-3">
|
||||
|
||||
<ul class="space-y-32">
|
||||
<li>
|
||||
<RouterLink to="/@hutopy">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Hutopy
|
||||
</div>
|
||||
</RouterLink>
|
||||
<div>
|
||||
<h2 class="text-center">Subscriptions</h2>
|
||||
|
||||
<RouterLink to="/@leffet">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
L'Effet
|
||||
</div>
|
||||
</RouterLink>
|
||||
<ul class="space-y-32">
|
||||
<li>
|
||||
<RouterLink to="/@hutopy">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Hutopy
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@chloebeaugrand">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Chloe Beaugrand
|
||||
</div>
|
||||
</RouterLink>
|
||||
<RouterLink to="/@leffet">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
L'Effet
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@guillaumeaime">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Guillaume Aime
|
||||
</div>
|
||||
</RouterLink>
|
||||
<RouterLink to="/@chloebeaugrand">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Chloe Beaugrand
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@mathieucaron">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Mathieu Caron
|
||||
</div>
|
||||
</RouterLink>
|
||||
<RouterLink to="/@guillaumeaime">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Guillaume Aime
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@mathieucaron">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
Mathieu Caron
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/@arps">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
ARPS
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<SiteMenu></SiteMenu>
|
||||
</div>
|
||||
|
||||
<RouterLink to="/@arps">
|
||||
<div class="nav-button">
|
||||
<v-icon class="mx-2">mdi-home</v-icon>
|
||||
ARPS
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
</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">
|
||||
</script>
|
||||
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="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 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>
|
||||
|
||||
|
||||
|
||||
</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;
|
||||
}
|
||||
|
||||
</style>
|
||||
.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,13 +35,14 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!--Banner & user info-->
|
||||
<div class="relative">
|
||||
<!--Banner-->
|
||||
<div>
|
||||
<img class="w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
|
||||
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
|
||||
</div>
|
||||
<!--User info -->
|
||||
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
|
||||
@@ -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">
|
||||
<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);
|
||||
}
|
||||
</style>
|
||||
|
||||
.v-btn--active {
|
||||
background-color: #1976D2;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user