128 lines
3.1 KiB
Vue
128 lines
3.1 KiB
Vue
<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-16 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
|
|
@mouseleave="handleMouseLeave"
|
|
@mouseenter="handleMouseEnter">
|
|
<SiteMenu></SiteMenu>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer">
|
|
</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>
|
|
</RouterLink>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center">
|
|
<v-text-field
|
|
v-model="searchQuery"
|
|
placeholder="Search"
|
|
hide-details
|
|
clearable
|
|
class="rounded-full mx-2 w-80"
|
|
append-inner-icon="mdi-magnify"
|
|
@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>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import {ref, onMounted, onUnmounted} from 'vue';
|
|
import {useRouter} from 'vue-router';
|
|
import SiteMenu from "@/views/main/SiteMenu.vue";
|
|
|
|
|
|
const showPopup = ref(false);
|
|
const popupRef = ref(null);
|
|
const popupButtonRef = ref(null);
|
|
let mouseLeaveTimeout = null;
|
|
|
|
const togglePopup = (state) => {
|
|
clearTimeout(mouseLeaveTimeout)
|
|
showPopup.value = state
|
|
};
|
|
|
|
// 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');
|
|
} else {
|
|
const words = query.split(' ');
|
|
|
|
if (words.length === 1) {
|
|
router.push(`/@${words[0]}`);
|
|
} else {
|
|
router.push({name: 'browse', query: {q: query}});
|
|
}
|
|
}
|
|
};
|
|
</script>
|