<template>

  <body style="background-color: #f4f4f4;">

    <!-- PC Version -->
    <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
      <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
        <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
          <v-menu>
            <template v-slot:activator="{ props }">
              <div class="d-flex align-center">

                <!-- Profile picture in the top right corner -->
                <img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
                <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
                  ANONYME
                </v-btn>
              </div>
            </template>

            <!-- Dropdown Menu Profile/Connection -->
            <v-list style="padding: 0;">
              <v-list-item>
                <router-link :to="{ name: 'yourprofile' }">
                  <v-btn class="full-width-btn" flat>Mon profile</v-btn>
                </router-link>
              </v-list-item>
              <v-list-item>
                <v-btn class="full-width-btn" flat>Déconnexion</v-btn>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-row>
      </v-container>
    </v-card>

    <!-- Mobile version -->
    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
      <v-app-bar app>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-row>
          <v-col cols="11" class="d-flex align-center justify-center">

            <!-- Logo Top bar -->
            <img src="/images/mobilemenulogo.png" class="mobile-header" alt="Logo">
          </v-col>
        </v-row>
      </v-app-bar>

      <!-- Left-side Menu -->
      <v-navigation-drawer v-model="drawer" temporary>
        <v-list>
          <v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
            <template v-slot:prepend>
              <img src="/images/pascal.jpg" class="mobile-profile-picture mini-profile-picture " alt="Avatar">
            </template>
          </v-list-item>
        </v-list>

        <!-- Left-side Button -->
        <v-divider></v-divider>
        <v-list density="compact" nav>
          <h1 class="h1-navigation">Navigation</h1>
          <router-link :to="{ name: 'home' }" class="">
            <v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
          </router-link>
          <RouterLink :to="{ name: 'contact' }">
            <v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
          </RouterLink>
          <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
          <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
          <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
            value="logout"></v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>
  </body>
</template>

<script setup>
import { ref } from 'vue';
const drawer = ref(false);
</script>


<style scoped>
.full-width-btn {
  width: 100%;
  text-align: left;
  padding-left: 24px;
  padding-right: 24px;
  z-index: 1001;
}

.mini-profile-picture {
  border-radius: 100px;
}

.header-profile-icon {
  height: 60px;
  width: 60px;
  border-radius: 50px;
  border: 2px solid #a30e79;
}

.mobile-profile-picture {
  height: 40px;
  border-radius: px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid #a30e79;
  margin-right: 10px
}

.header-banner {
  border-top: 5px solid rgba(107, 0, 101, 1);
  margin-top: 15%;

}

.social-container {
  background-color: #006d77;
  margin-top: -20%;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
}

.social-container2 {
  background-color: #0baab2;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
  min-width: 400px;

}

.mobile-header {
  height: 50px;

}
</style>