Browse Source

fix: Smoothened sidebar animation

pull/6490/head
Muhammed Mustafa 1 year ago
parent
commit
8c926f4fe4
  1. 3
      packages/nc-gui/components/dashboard/View.vue
  2. 9
      packages/nc-gui/components/general/OpenLeftSidebarBtn.vue

3
packages/nc-gui/components/dashboard/View.vue

@ -64,12 +64,11 @@ watch(isLeftSidebarOpen, () => {
setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration) setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration)
} else { } else {
sideBarSize.value.old = sideBarSize.value.current sideBarSize.value.old = sideBarSize.value.current
sideBarSize.value.current = 0
sidebarState.value = 'hiddenStart' sidebarState.value = 'hiddenStart'
setTimeout(() => { setTimeout(() => {
sideBarSize.value.current = 0
sidebarState.value = 'hiddenEnd' sidebarState.value = 'hiddenEnd'
}, animationDuration) }, animationDuration)
} }

9
packages/nc-gui/components/general/OpenLeftSidebarBtn.vue

@ -25,10 +25,10 @@ const onClick = () => {
<NcTooltip <NcTooltip
placement="topLeft" placement="topLeft"
hide-on-click hide-on-click
class="transition-all duration-100" class="transition-all duration-150"
:class="{ :class="{
'opacity-0 max-w-0': !isMobileMode && isLeftSidebarOpen, 'opacity-0 w-0': !isMobileMode && isLeftSidebarOpen,
'opacity-100': isMobileMode || !isLeftSidebarOpen, 'opacity-100 w-8': isMobileMode || !isLeftSidebarOpen,
}" }"
> >
<template #title> <template #title>
@ -42,9 +42,6 @@ const onClick = () => {
:type="isMobileMode ? 'secondary' : 'text'" :type="isMobileMode ? 'secondary' : 'text'"
:size="isMobileMode ? 'medium' : 'small'" :size="isMobileMode ? 'medium' : 'small'"
class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800" class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800"
:class="{
'invisible !w-0': !isMobileMode && isLeftSidebarOpen,
}"
@click="onClick" @click="onClick"
> >
<div class="flex items-center text-inherit"> <div class="flex items-center text-inherit">

Loading…
Cancel
Save