<script setup lang="ts">
import { ref } from "vue";

const showSearch = ref(false);
</script>

<template>
  <v-app class="mx-5 my-3">
    <v-app-bar :elevation="2" rounded density="comfortable">
      <template v-slot:prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>

      <template v-slot:default>
        <v-app-bar-title>DocuSphere</v-app-bar-title>
      </template>

      <template v-slot:append class="align-center justify-center">
        <v-btn icon="mdi-heart"></v-btn>

        <!---------------->
        <!-- Search Bar -->
        <!---------------->
        <v-btn
          class="mr-1"
          icon="mdi-magnify"
          @click="showSearch = !showSearch"
        >
        </v-btn>

        <v-slide-x-reverse-transition hide-on-leave>
          <v-responsive v-show="showSearch" min-width="20vw">
            <v-text-field
              variant="solo-filled"
              class="w-100 justify-center align-center"
              label="Search"
              clearable
            ></v-text-field>
          </v-responsive>
        </v-slide-x-reverse-transition>

        <v-divider v-show="!showSearch" vertical></v-divider>

        <!------------------>
        <!-- User Profile -->
        <!------------------>
        <v-menu>
          <template v-slot:activator="{ props }">
            <v-btn
              class="ml-3 mr-2"
              icon="mdi-account"
              variant="text"
              v-bind="props"
            ></v-btn>
          </template>

          <v-list>
            <v-list-item
              v-for="(item, index) in [
                { title: 'Profile' },
                { title: 'Settings' },
                { title: 'Log Out' },
              ]"
              :key="index"
              :value="index"
            >
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </template>
    </v-app-bar>
  </v-app>
</template>

<style scoped></style>
