38 lines
1.2 KiB
Vue
38 lines
1.2 KiB
Vue
<template>
|
|
<v-navigation-drawer permanent rail theme="dark" class="elevation-2">
|
|
<v-list density="compact">
|
|
<v-list-item link :to="{name: 'HomeView' }" :active="false">
|
|
<v-icon icon="mdi-grain" color="blue-lighten-5"></v-icon>
|
|
</v-list-item>
|
|
</v-list>
|
|
<template v-slot:append>
|
|
<v-list density="compact">
|
|
<v-list-item to="/profile">
|
|
<v-avatar color="blue-lighten-2" v-if="data">
|
|
<v-img :src="gravatarUrl(data.email)"></v-img>
|
|
</v-avatar>
|
|
</v-list-item>
|
|
<v-list-item prepend-icon="mdi-theme-light-dark" @click="toggleTheme" :active="false"></v-list-item>
|
|
</v-list>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useQuery } from '@tanstack/vue-query'
|
|
import { getMe } from '@/client/client'
|
|
import gravatarUrl from 'gravatar-url'
|
|
|
|
import { useTheme } from 'vuetify'
|
|
|
|
const theme = useTheme()
|
|
|
|
function toggleTheme () {
|
|
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
|
|
}
|
|
const { data, error, isFetching, isPending, isSuccess } = useQuery({
|
|
queryKey: ['me'],
|
|
queryFn: () => getMe(),
|
|
})
|
|
</script> |