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.
73 lines
1.8 KiB
73 lines
1.8 KiB
<script lang="ts" setup> |
|
const workspaceStore = useWorkspace() |
|
|
|
const { isWorkspaceLoading } = storeToRefs(workspaceStore) |
|
|
|
const { isSharedBase } = storeToRefs(useBase()) |
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
const treeViewDom = ref<HTMLElement>() |
|
|
|
const isTreeViewOnScrollTop = ref(false) |
|
|
|
const checkScrollTopMoreThanZero = () => { |
|
if (isMobileMode.value) return |
|
|
|
if (treeViewDom.value) { |
|
if (treeViewDom.value.scrollTop > 0) { |
|
isTreeViewOnScrollTop.value = true |
|
} else { |
|
isTreeViewOnScrollTop.value = false |
|
} |
|
} |
|
return false |
|
} |
|
|
|
onMounted(() => { |
|
treeViewDom.value?.addEventListener('scroll', checkScrollTopMoreThanZero) |
|
}) |
|
|
|
onUnmounted(() => { |
|
treeViewDom.value?.removeEventListener('scroll', checkScrollTopMoreThanZero) |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div |
|
class="nc-sidebar flex flex-col bg-gray-50 outline-r-1 outline-gray-100 select-none w-full h-full" |
|
:style="{ |
|
outlineWidth: '1px', |
|
}" |
|
> |
|
<div class="flex flex-col"> |
|
<DashboardSidebarHeader /> |
|
|
|
<DashboardSidebarTopSection v-if="!isSharedBase" /> |
|
</div> |
|
<div |
|
ref="treeViewDom" |
|
class="flex flex-col nc-scrollbar-dark-md flex-grow xs:(border-transparent pt-2 pr-2)" |
|
:class="{ |
|
'border-t-1': !isSharedBase, |
|
'border-transparent': !isTreeViewOnScrollTop, |
|
'pt-0.25': isSharedBase, |
|
}" |
|
> |
|
<DashboardTreeView v-if="!isWorkspaceLoading" /> |
|
</div> |
|
<div v-if="!isSharedBase" class="flex-none overflow-auto"> |
|
<GeneralGift v-if="!isEeUI" /> |
|
<div class="border-t-1 w-full"></div> |
|
<DashboardSidebarBeforeUserInfo /> |
|
<DashboardSidebarFeed /> |
|
<DashboardSidebarUserInfo /> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.nc-sidebar-top-button { |
|
@apply flex flex-row mx-1 px-3.5 rounded-md items-center py-0.75 my-0.5 gap-x-2 hover:bg-gray-200 cursor-pointer; |
|
} |
|
</style>
|
|
|