76 lines
2 KiB
Vue
76 lines
2 KiB
Vue
<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>
|