mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
3.2 KiB
92 lines
3.2 KiB
<script lang="ts" setup> |
|
import MdiAt from '~icons/mdi/at' |
|
import MdiLogout from '~icons/mdi/logout' |
|
import MdiDotsVertical from '~icons/mdi/dots-vertical' |
|
import MaterialSymbolsMenu from '~icons/material-symbols/menu' |
|
import { navigateTo } from '#app' |
|
|
|
const { $state } = useNuxtApp() |
|
const email = computed(() => $state.user?.value?.email ?? '---') |
|
|
|
const signOut = () => { |
|
$state.signOut() |
|
navigateTo('/signin') |
|
} |
|
</script> |
|
|
|
<template> |
|
<v-app> |
|
<v-app-bar class="shadow-md bg-primary" height="48"> |
|
<div class="flex items-center flex-1"> |
|
<v-toolbar-title> |
|
<v-tooltip bottom> |
|
{{ $t('general.home') }} |
|
<span class="caption font-weight-light pointer">(version)</span> |
|
</v-tooltip> |
|
|
|
<span class="body-1" @click="navigateTo('/projects')">NocoDB</span> |
|
</v-toolbar-title> |
|
|
|
<!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading |
|
<span v-show="$nuxt.$loading.show" class="caption grey--text ml-3"> |
|
{{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon> |
|
</span> |
|
|
|
|
|
todo: replace shortkey? |
|
<span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" /> |
|
--> |
|
</div> |
|
|
|
<div class="flex justify-end"> |
|
<v-toolbar-items class="flex gap-4 nc-topright-menu"> |
|
<!-- todo: implement components |
|
<release-info /> |
|
--> |
|
|
|
<general-color-mode-switcher v-model="$state.darkMode.value" /> |
|
|
|
<general-language class="mr-3" /> |
|
|
|
<MaterialSymbolsMenu |
|
v-if="$state.signedIn.value" |
|
class="block text-xl cursor-pointer xl:(hidden)" |
|
@click="$state.sidebarOpen.value = !$state.sidebarOpen.value" |
|
/> |
|
|
|
<template v-if="$state.signedIn.value"> |
|
<v-menu class="leading-8"> |
|
<template #activator="{ props }"> |
|
<MdiDotsVertical class="md:text-xl cursor-pointer" @click="props.onClick" /> |
|
</template> |
|
|
|
<v-list class="!py-0 nc-user-menu min-w-32 dark:(!bg-gray-800)"> |
|
<nuxt-link |
|
v-t="['c:navbar:user:email']" |
|
class="group hover:(bg-gray-200) dark:(hover:bg-gray-600) flex items-center p-2 no-underline" |
|
to="/user/settings" |
|
> |
|
<MdiAt class="mt-1 color-transition group-hover:text-success" /> |
|
<span class="prose">{{ email }}</span> |
|
</nuxt-link> |
|
|
|
<v-divider /> |
|
|
|
<div |
|
v-t="['a:navbar:user:sign-out']" |
|
class="group flex flex-row cursor-pointer hover:bg-gray-200 dark:(hover:bg-gray-600) flex items-center p-2" |
|
@click="signOut" |
|
> |
|
<MdiLogout class="color-transition dark:text-white group-hover:(!text-red-500)" /> |
|
<span class="prose font-semibold text-gray-500">{{ $t('general.signOut') }}</span> |
|
</div> |
|
</v-list> |
|
</v-menu> |
|
</template> |
|
</v-toolbar-items> |
|
</div> |
|
</v-app-bar> |
|
|
|
<NuxtPage /> |
|
</v-app> |
|
</template>
|
|
|