Files
pronature-platform/src/components/AppHeader.vue
T
2026-02-05 18:30:53 +02:00

35 lines
1.5 KiB
Vue

<template>
<v-app-bar color="blue" scroll-behavior="elevate" scroll-threshold="20" :height="100" image="/static/bck-2.webp">
<!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
<template v-slot:prepend>
<v-avatar class="ml-3" size="66" rounded="0">
<v-img src="/logo.webp" alt="ProNature Logo"></v-img>
</v-avatar>
</template>
<v-app-bar-title>{{ l.playground }}</v-app-bar-title>
<v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor" v-tooltip="l.workshop"></v-btn>
<v-dialog max-width="480">
<template v-slot:activator="{ props }">
<v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
</template>
<template v-slot:default="{ isActive }">
<v-card class="pa-3" :title="user? l.profile : l.signin ">
<v-card-text>
<Profile v-if="user"></Profile>
<Auth v-show="!user" @login-success="isActive.value = false"></Auth>
</v-card-text>
</v-card>
</template>
</v-dialog >
</v-app-bar>
</template>
<script setup>
import { useTheme } from 'vuetify'
import Profile from './User/Profile.vue';
const theme = useTheme()
function toggleTheme () {
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>