mirror of https://github.com/nocodb/nocodb
braks
2 years ago
6 changed files with 237 additions and 222 deletions
@ -0,0 +1,223 @@
|
||||
<script lang="ts" setup> |
||||
import { breakpointsTailwind } from '@vueuse/core' |
||||
import { navigateTo } from '#app' |
||||
import { computed, ref, useBreakpoints, useGlobal, useProject, useRoute, useRouter, useSidebar } from '#imports' |
||||
|
||||
/** get current breakpoints (for enabling sidebar) */ |
||||
const breakpoints = useBreakpoints(breakpointsTailwind) |
||||
|
||||
const { signOut, signedIn, isLoading, user } = useGlobal() |
||||
|
||||
const { isOpen } = useSidebar({ isOpen: signedIn.value && breakpoints.isGreater('md') }) |
||||
|
||||
const { project } = useProject() |
||||
|
||||
const router = useRouter() |
||||
|
||||
const route = useRoute() |
||||
|
||||
const sidebar = ref<HTMLDivElement>() |
||||
|
||||
const globalSearch = ref('') |
||||
|
||||
const email = computed(() => user.value?.email ?? '---') |
||||
|
||||
const logout = () => { |
||||
signOut() |
||||
navigateTo('/signin') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-layout id="app-layout"> |
||||
<!-- todo: mini sidebar on the left with navigational icons, disabled currently --> |
||||
<a-layout-sider |
||||
:collapsed="true" |
||||
width="50" |
||||
collapsed-width="0" |
||||
class="nc-sidebar-left !bg-primary h-full" |
||||
:trigger="null" |
||||
collapsible |
||||
theme="light" |
||||
> |
||||
<a-dropdown placement="bottom" :trigger="['click']"> |
||||
<div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105"> |
||||
<img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> |
||||
</div> |
||||
|
||||
<template v-if="signedIn" #overlay> |
||||
<a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded"> |
||||
<a-menu-item-group title="User Settings"> |
||||
<a-menu-item key="email" 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" /> |
||||
|
||||
<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="signout" 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)" /> |
||||
<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-item-group> |
||||
</a-menu> |
||||
</template> |
||||
</a-dropdown> |
||||
|
||||
<div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full"> |
||||
<a-dropdown :trigger="['contextmenu']" placement="right"> |
||||
<div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')"> |
||||
<MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" /> |
||||
</div> |
||||
|
||||
<template #overlay> |
||||
<a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded"> |
||||
<a-menu-item-group> |
||||
<template #title> |
||||
<span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')"> |
||||
{{ $t('objects.projects') }} |
||||
</span> |
||||
</template> |
||||
|
||||
<a-menu-item class="active:(ring ring-pink-500)"> |
||||
<div |
||||
v-t="['c:project:create:xcdb']" |
||||
class="group flex items-center gap-2 py-2 hover:text-primary" |
||||
@click="navigateTo('/project/create')" |
||||
> |
||||
<MdiPlus class="text-lg group-hover:text-pink-500" /> |
||||
{{ $t('activity.createProject') }} |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item class="rounded-b active:(ring ring-pink-500)"> |
||||
<div |
||||
v-t="['c:project:create:extdb']" |
||||
class="group flex items-center gap-2 py-2 hover:text-primary" |
||||
@click="navigateTo('/project/create-external')" |
||||
> |
||||
<MdiDatabaseOutline class="text-lg group-hover:text-pink-500" /> |
||||
<div v-html="$t('activity.createProjectExtended.extDB')" /> |
||||
</div> |
||||
</a-menu-item> |
||||
</a-menu-item-group> |
||||
</a-menu> |
||||
</template> |
||||
</a-dropdown> |
||||
|
||||
<a-tooltip placement="right"> |
||||
<template v-if="project" #title>{{ project.title }}</template> |
||||
|
||||
<div |
||||
:class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']" |
||||
class="nc-sidebar-left-item" |
||||
@click="navigateTo(`/nc/${route.params.projectId}`)" |
||||
> |
||||
<MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</div> |
||||
</a-layout-sider> |
||||
|
||||
<slot name="sidebar" /> |
||||
|
||||
<a-layout class="!flex-col"> |
||||
<a-layout-header class="flex !bg-primary items-center text-white !px-[1px] shadow-lg"> |
||||
<slot name="header-start" /> |
||||
|
||||
<div id="header-start" class="w-[250px] flex items-center px-1 h-full" /> |
||||
|
||||
<div class="hidden 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" /> |
||||
|
||||
<div v-if="signedIn" class="text-white"> |
||||
<div class="flex items-center px-4 gap-4"> |
||||
<a-tooltip placement="bottom"> |
||||
<template #title> Go back </template> |
||||
|
||||
<MaterialSymbolsArrowBackRounded |
||||
class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl" |
||||
@click="router.go(-1)" |
||||
/> |
||||
</a-tooltip> |
||||
|
||||
<a-tooltip placement="bottom"> |
||||
<template #title>Go forward</template> |
||||
|
||||
<MaterialSymbolsArrowForwardRounded |
||||
class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl" |
||||
@click="router.go(+1)" |
||||
/> |
||||
</a-tooltip> |
||||
|
||||
<a-input |
||||
v-model:value="globalSearch" |
||||
class="nc-global-search group hover:ring active:ring-pink-500 focus:ring-pink-500 flex" |
||||
size="small" |
||||
placeholder="CMD + K" |
||||
> |
||||
<template #prefix> |
||||
<MdiMagnify class="transform text-gray-400 group-hover:(scale-105 text-pink-500)" /> |
||||
</template> |
||||
</a-input> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<a-tooltip placement="right"> |
||||
<template #title> Switch language </template> |
||||
|
||||
<div class="flex pr-4 items-center"> |
||||
<GeneralLanguage class="cursor-pointer text-2xl" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-layout-header> |
||||
|
||||
<div class="w-full h-full"> |
||||
<slot /> |
||||
</div> |
||||
</a-layout> |
||||
</a-layout> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nc-sidebar-left { |
||||
:deep(.ant-layout-sider-children) { |
||||
@apply flex flex-col items-center; |
||||
} |
||||
|
||||
.nc-sidebar-left-item { |
||||
@apply flex w-full justify-center items-center h-12 group p-2; |
||||
|
||||
&.active { |
||||
@apply bg-pink-500 border-t-1 border-b-1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
:deep(.ant-dropdown-menu-item-group-title) { |
||||
@apply border-b-1; |
||||
} |
||||
|
||||
:deep(.ant-dropdown-menu-item-group-list) { |
||||
@apply m-0; |
||||
} |
||||
|
||||
.nc-global-search { |
||||
@apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue