social-media/src/views/main/Header.vue

<template>
  <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="sideBarStore.toggle()">
      </v-app-bar-nav-icon>

      <RouterLink class="d-sm-block d-md-block d-lg-none" to="/">
        
        <v-img
            src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
            ref="popupButtonRef"
            alt="Hutopy Logo"
            class="w-10"
        ></v-img>        
      </RouterLink>

      <RouterLink class="d-none d-lg-flex" to="/">
        <v-img
            src="/medias/hutopy.png"
            ref="popupButtonRef"
            alt="Hutopy Logo"
            class="mr-2 h-10 w-20"
        ></v-img>
        <div class="flex align-center text-sm">ALPHA</div>
      </RouterLink>
    </div>
    <!-- SmallScreen Searchbar  -->
    <div class="flex-grow flex items-center justify-center relative">    
      <div v-if="showSearch && isSmallScreen" class="search-bar-wrapper">
        <v-text-field
            density="compact"
            rounded
            variant="outlined"
            v-model="searchQuery"
            placeholder="Recherche"
            hide-details
            clearable
            append-inner-icon="mdi-magnify"
            @click.stop
            @click:append-inner="onSearch"
            @keyup.enter="onSearch"
        >
        </v-text-field>
      </div>

      <!-- largeScreen Searchbar  -->
      <div v-if="showSearch && !isSmallScreen" class="search-bar-large-screen">
        <v-text-field
            density="compact"
            rounded
            variant="outlined"
            v-model="searchQuery"
            placeholder="Recherche"
            hide-details
            clearable
            append-inner-icon="mdi-magnify"
            @click.stop
            @click:append-inner="onSearch"
            @keyup.enter="onSearch"
        >
        </v-text-field>
      </div>
      
    </div>

    <div class="flex items-center space-x-4 search-container">
      <template v-if="!showSearch">
        <v-icon class="mx-2 cursor-pointer" @click.stop="toggleSearch">mdi-magnify</v-icon>
      </template>

      <div class="text-center">
        <v-menu open-on-click>
          <template v-slot:activator="{ props }">
            <div v-bind="props" class="flex align-center font-sans py-1 px-2 rounded-lg hover:bg-gray-100">
              <span class="max-w-xs hidden md:block capitalize">
                {{ userProfileStore.alias }}
              </span>
              <img
                  :src="userProfileStore.portraitUrl"
                  alt="Profile Image"
                  class="ml-2 rounded-full"
                  width="32"
                  height="32"
              />
            </div>
          </template>

          <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-list-item-title>
              </v-list-item>
            </template>

            <template v-else>
              <v-list-item v-if="creatorProfileStore.creator.name && Object.keys(creatorProfileStore.creator).length > 0" class="nav-button">
                <router-link :to="`/@${creatorProfileStore.creator.name}`">
                  <v-btn class="w-100" variant="plain">{{ creatorProfileStore.creator.name }}</v-btn>
                </router-link>
              </v-list-item>

              <v-list-item v-if="!creatorProfileStore.hasCreator" class="nav-button">
                <router-link to="/profile?target=CreatorPage">
                  <v-btn class="w-100" variant="plain">Activer votre page</v-btn>
                </router-link>
              </v-list-item>

              <v-list-item class="nav-button">
                <v-list-item-title>
                  <v-btn to="/profile" class="w-100" variant="plain">{{ $t('header.myprofile') }}</v-btn>
                </v-list-item-title>
              </v-list-item>
              <v-list-item class="nav-button">
                <v-list-item-title>
                  <v-btn to="/wallet" class="w-100" variant="plain">{{ $t('header.wallet') }}</v-btn>
                </v-list-item-title>
              </v-list-item>
              <v-list-item class="nav-button">
                <v-list-item-title>
                  <v-btn @click="authStore.logout" class="w-100" variant="plain">{{ $t('header.Signout') }}</v-btn>
                </v-list-item-title>
              </v-list-item>
            </template>
          </v-list>
        </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 { useAuthStore } from "@/stores/authStore.js";
import { useDisplay } from 'vuetify';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";

const authStore = useAuthStore();
const userProfileStore = useUserProfileStore();
const creatorProfileStore = useCreatorProfileStore();

const sideBarStore = useSideBarStore();
const { smAndDown } = useDisplay();

const router = useRouter();
const searchQuery = ref("");
const showSearch = ref(false);
const isSmallScreen = ref(smAndDown.value);

watch(smAndDown, (val) => {
  isSmallScreen.value = val;
});

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 } });
    }
  }
};

const toggleSearch = () => {
  showSearch.value = !showSearch.value;
};

const handleClickOutside = (event) => {
  if (!event.target.closest('.search-container')) {
    showSearch.value = false;
  }
};

onBeforeMount(() => {
  document.addEventListener('click', handleClickOutside)
});

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.search-container {
  position: relative;
}

.nav-button:hover {
  @apply bg-[#903175] text-gray-200;
}

.absolute-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  align-items: center;
}

.search-bar-wrapper {
  position: absolute;
  width: 100%;
  max-width: 700px;
  z-index: 50;
  margin-left: 20px;
}

.search-bar-large-screen {
  display: flex; 
  width: 600px;
  z-index: 50;
}

@media (min-width: 1024px) {
  .search-bar-large-screen {
    display: flex;
    margin-left: auto;
    width: 600px;
  }
}

@media (max-width: 640px) {
  .absolute-center {
    left: 65%;
    transform: translateX(-55%);
  }
}
</style>