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

Ajout du content browser et lien dans le header

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-10 01:40:42 -04:00
parent 8ecdb27279
commit 70e134a79f
3 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/main/Header.vue
View File

@@ -6,7 +6,6 @@
<div class="flex items-center">
<v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
</v-app-bar-nav-icon>
<RouterLink to="/" class="hidden md:block">
<v-img
src="/medias/hutopy.png"
@@ -26,6 +25,22 @@
</RouterLink>
</div>
<!-- Spacer to push the Explorer button to the center -->
<div class="flex-grow"></div>
<!-- Explorer Button -->
<v-btn
variant="plain"
icon
class="flex flex-row justify-center"
@click="explorerHandler"
>
<v-icon>mdi-earth</v-icon>
</v-btn>
<!-- Spacer to keep the search bar to the right -->
<div class="flex-grow"></div>
<div class="flex items-center ml-auto space-x-4 search-container">
<template v-if="showSearch">
<v-text-field
@@ -54,7 +69,7 @@
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<div v-bind="props" class="flex align-center font-sans py-1 px-4 rounded-lg hover:bg-gray-100">
<span class="max-w-xs hidden md:block">
<span class="max-w-xs hidden md:block">
{{ userStore.alias }}
</span>
<img
@@ -66,12 +81,12 @@
</div>
</template>
<v-list min-width="200px" class=" align-center mt-3 left-3">
<v-list min-width="200px" class="align-center mt-3 left-3">
<template v-if="!authStore.isAuthenticated">
<v-list-item class="nav-button">
<v-list-item-title>
<v-btn to="/login" class="w-100 " variant="plain">Connexion</v-btn>
<v-btn to="/login" class="w-100" variant="plain">Connexion</v-btn>
</v-list-item-title>
</v-list-item>
</template>
@@ -79,13 +94,13 @@
<template v-else>
<v-list-item v-if="userStore.creator && Object.keys(userStore.creator).length > 0" class="nav-button">
<router-link :to="`/@${userStore.creator.name}`">
<v-btn class="w-100 " variant="plain">@{{ userStore.creator.name }}</v-btn>
<v-btn class="w-100" variant="plain">@{{ userStore.creator.name }}</v-btn>
</router-link>
</v-list-item>
<v-list-item v-if="userStore.creator && !Object.keys(userStore.creator).length > 0" class="nav-button">
<router-link :to="`/@${userStore.creator.name}`">
<v-btn class="w-100 " variant="plain">Activer votre page </v-btn>
<v-btn class="w-100" variant="plain">Activer votre page</v-btn>
</router-link>
</v-list-item>
@@ -109,17 +124,15 @@
</v-menu>
</div>
</div>
</header>
</template>
<script setup>
import {ref, onBeforeUnmount, onBeforeMount, watch} from "vue";
import {useRouter} from 'vue-router';
import {useSideBarStore} from '@/stores/sideBarStore.js';
import {useUserStore} from "@/stores/userStore.js";
import {useAuthStore} from "@/stores/authStore.js";
import { ref, onBeforeUnmount, onBeforeMount } from "vue";
import { useRouter } from 'vue-router';
import { useSideBarStore } from '@/stores/sideBarStore.js';
import { useUserStore } from "@/stores/userStore.js";
import { useAuthStore } from "@/stores/authStore.js";
const authStore = useAuthStore()
const userStore = useUserStore()
@@ -147,6 +160,10 @@ const toggleSearch = () => {
showSearch.value = !showSearch.value;
};
const explorerHandler = () => {
router.push('/explorer');
};
const handleClickOutside = (event) => {
if (!event.target.closest('.search-container')) {
showSearch.value = false;
@@ -163,7 +180,6 @@ onBeforeUnmount(() => {
</script>
<style scoped>
.search-container {
position: relative;
@@ -172,6 +188,4 @@ onBeforeUnmount(() => {
.nav-button:hover {
@apply bg-[#903175] text-gray-200;
}
</style>