Merge pull request #3660 from nocodb/fix/right-sidebar-collapse

packages/nc-gui/components/smartsheet/sidebar/index.vue

@@ -113,6 +113,7 @@ function onCreate(view: ViewType) {
       v-if="isOpen"
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
     />
+
     <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 

packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 /** Sidebar visible */
-const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
+const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
+
+const onClick = () => {
+  toggle(!isOpen.value)
+}
 </script>
 
 <template>
   <div :class="{ 'nc-active-btn': isOpen }">
-    <a-button size="small" class="nc-toggle-right-navbar" @click="toggle(!isOpen)">
+    <a-button size="small" class="nc-toggle-right-navbar" @click="onClick">
       <div class="flex items-center gap-1 text-xs" :class="{ 'text-gray-500': !isOpen }">
         <AntDesignMenuUnfoldOutlined v-if="isOpen" />
         <AntDesignMenuFoldOutlined v-else />

packages/nc-gui/components/smartsheet/sidebar/toolbar/index.vue

@@ -20,8 +20,11 @@ const clickCount = $ref(0)
     "
   >
     <slot name="start" />
+
     <ToggleDrawer />
+
     <span></span>
+
     <template v-if="debug">
       <ExportCache />
 

packages/nc-gui/composables/useSidebar/index.ts

@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { useInjectionState, watch } from '#imports'
+import { ref, syncRef, toRefs, useInjectionState, watch } from '#imports'
 
 interface UseSidebarProps {
   hasSidebar?: boolean
@@ -16,8 +16,8 @@ interface UseSidebarProps {
  * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no injection state can be found
  */
 const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => {
-  let isOpen = ref(props.isOpen ?? false)
-  let hasSidebar = ref(props.hasSidebar ?? true)
+  const isOpen = ref(props.isOpen ?? false)
+  const hasSidebar = ref(props.hasSidebar ?? true)
 
   function toggle(state?: boolean) {
     isOpen.value = state ?? !isOpen.value
@@ -29,8 +29,8 @@ const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => {
 
   if (props.storageKey) {
     const storage = toRefs(useStorage(props.storageKey, { isOpen, hasSidebar }, localStorage, { mergeDefaults: true }).value)
-    isOpen = storage.isOpen
-    hasSidebar = storage.hasSidebar
+    syncRef(isOpen, storage.isOpen)
+    syncRef(hasSidebar, storage.hasSidebar)
   }
 
   watch(