nocodb/packages/nc-gui-v2/layouts/base.vue

<script lang="ts" setup>
import { navigateTo } from '#app'
import { computed, useGlobal, useRoute } from '#imports'

const { signOut, signedIn, isLoading, user } = useGlobal()

const route = useRoute()

const email = computed(() => user.value?.email ?? '---')

const logout = () => {
  signOut()
  navigateTo('/signin')
}
</script>

<template>
  <a-layout id="nc-app" has-sider>
    <div id="nc-sidebar-left" />

    <a-layout class="!flex-col">
      <Transition name="layout">
        <a-layout-header v-if="signedIn" class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg">
          <div
            v-if="
              route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
            "
            class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
            @click="navigateTo('/')"
          >
            <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
          </div>

          <div class="flex justify-center">
            <div v-show="isLoading" class="flex items-center gap-2 ml-3">
              {{ $t('general.loading') }}

              <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
            </div>
          </div>

          <div class="flex-1" />

          <a-tooltip placement="left">
            <template #title> Switch language </template>

            <div class="flex pr-4 items-center">
              <GeneralLanguage class="cursor-pointer text-2xl" />
            </div>
          </a-tooltip>

          <template v-if="signedIn">
            <a-dropdown :trigger="['click']">
              <MdiDotsVertical class="md:text-xl cursor-pointer nc-user-menu" @click.prevent />

              <template #overlay>
                <a-menu class="!py-0 nc-user-menu dark:(!bg-gray-800) leading-8 !rounded">
                  <a-menu-item key="0" class="!rounded-t">
                    <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                      <MdiAt class="mt-1 group-hover:text-success" />&nbsp;

                      <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
                    </nuxt-link>
                  </a-menu-item>

                  <a-menu-divider class="!m-0" />

                  <a-menu-item key="1" class="!rounded-b">
                    <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
                      <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;

                      <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
                        {{ $t('general.signOut') }}
                      </span>
                    </div>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </template>
        </a-layout-header>
      </Transition>

      <a-tooltip>
        <template #title> Switch language </template>

        <Transition name="layout">
          <div v-if="!signedIn" class="nc-lang-btn">
            <GeneralLanguage />
          </div>
        </Transition>
      </a-tooltip>

      <div class="w-full h-full overflow-hidden">
        <slot />
      </div>
    </a-layout>
  </a-layout>
</template>

<style lang="scss" scoped>
:deep(.ant-dropdown-menu-item-group-title) {
  @apply border-b-1;
}

:deep(.ant-dropdown-menu-item-group-list) {
  @apply m-0;
}

.nc-lang-btn {
  @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500);

  &::after {
    @apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
    content: '';
    z-index: -1;
  }

  &:hover::after {
    @apply transform scale-110 ring ring-pink-500;
  }

  &:active::after {
    @apply ring ring-pink-500;
  }
}
</style>