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.
53 lines
1.4 KiB
53 lines
1.4 KiB
<script lang="ts" setup> |
|
const { isRightSidebarOpen: _isRightSidebarOpen } = storeToRefs(useSidebarStore()) |
|
const isRightSidebarOpen = ref(_isRightSidebarOpen.value) |
|
|
|
watch(_isRightSidebarOpen, (val) => { |
|
if (val) { |
|
isRightSidebarOpen.value = true |
|
} else { |
|
setTimeout(() => { |
|
isRightSidebarOpen.value = false |
|
}, 300) |
|
} |
|
}) |
|
|
|
const onClick = () => { |
|
if (_isRightSidebarOpen.value) return |
|
|
|
_isRightSidebarOpen.value = !_isRightSidebarOpen.value |
|
} |
|
</script> |
|
|
|
<template> |
|
<NcTooltip |
|
placement="bottomLeft" |
|
hide-on-click |
|
class="transition-all duration-100" |
|
:class="{ |
|
'!w-0 !opacity-0': isRightSidebarOpen, |
|
'!w-8 !opacity-100 mr-2': !isRightSidebarOpen, |
|
}" |
|
> |
|
<template #title> |
|
{{ |
|
isRightSidebarOpen |
|
? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}` |
|
: `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}` |
|
}} |
|
</template> |
|
<NcButton |
|
type="text" |
|
size="small" |
|
class="nc-sidebar-right-toggle-icon !text-gray-600 !hover:text-gray-800" |
|
:class="{ |
|
'invisible !w-0': isRightSidebarOpen, |
|
}" |
|
@click="onClick" |
|
> |
|
<div class="flex items-center text-inherit"> |
|
<GeneralIcon icon="doubleLeftArrow" class="duration-150 transition-all !text-lg -mt-0.25" /> |
|
</div> |
|
</NcButton> |
|
</NcTooltip> |
|
</template>
|
|
|