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