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>
|
||||
Reference in New Issue
Block a user