fix: Cleanup up sidebar store

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -53,8 +53,6 @@ const activeView = inject(ActiveViewInj, ref())
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const { rightSidebarState } = storeToRefs(useSidebarStore())
-
 const isDefaultBase = computed(() => {
   const base = project.value?.bases?.find((b) => b.id === vModel.value.base_id)
   if (!base) return false
@@ -193,12 +191,6 @@ function onStopEdit() {
   }, 250)
 }
 
-watch(rightSidebarState, () => {
-  if (rightSidebarState.value === 'peekCloseEnd') {
-    isDropdownOpen.value = false
-  }
-})
-
 function onRef(el: HTMLElement) {
   if (activeViewTitleOrId.value === vModel.value.id) {
     nextTick(() => {

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

@@ -12,6 +12,7 @@ const {
   leftSidebarWidthPercent,
   leftSideBarSize: sideBarSize,
   leftSidebarState: sidebarState,
+  mobileNormalizedSidebarSize,
 } = storeToRefs(useSidebarStore())
 
 const wrapperRef = ref<HTMLDivElement>()
@@ -31,14 +32,6 @@ const { handleSidebarOpenOnMobileForNonViews } = useConfigStore()
 
 const contentSize = computed(() => 100 - sideBarSize.value.current)
 
-const mobileNormalizedSidebarSize = computed(() => {
-  if (isMobileMode.value) {
-    return isLeftSidebarOpen.value ? 100 : 0
-  }
-
-  return currentSidebarSize.value
-})
-
 const mobileNormalizedContentSize = computed(() => {
   if (isMobileMode.value) {
     return isLeftSidebarOpen.value ? 0 : 100

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -58,7 +58,6 @@ const { allowCSVDownload } = useSharedView()
           :show-system-fields="false"
         />
       </template>
-      <LazySmartsheetToolbarOpenViewSidebarBtn v-if="isViewSidebarAvailable" />
     </template>
   </div>
 </template>

packages/nc-gui/components/smartsheet/toolbar/OpenViewSidebarBtn.vue

@@ -1,53 +0,0 @@
-<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>

packages/nc-gui/store/sidebar.ts

@@ -4,41 +4,40 @@ import { MAX_WIDTH_FOR_MOBILE_MODE } from '~/lib'
 export const useSidebarStore = defineStore('sidebarStore', () => {
   const { width } = useWindowSize()
   const isViewPortMobile = () => width.value < MAX_WIDTH_FOR_MOBILE_MODE
+  const { isMobileMode } = useGlobal()
 
   const isLeftSidebarOpen = ref(!isViewPortMobile())
   const isRightSidebarOpen = ref(true)
 
   const leftSidebarWidthPercent = ref(isViewPortMobile() ? 0 : 20)
 
-  const leftSidebarWidth = computed(() => (width.value * leftSidebarWidthPercent.value) / 100)
-
   const leftSideBarSize = ref({
     old: 20,
     current: leftSidebarWidthPercent.value,
   })
 
-  const rightSidebarSize = ref({
-    old: 17.5,
-    current: 17.5,
-  })
-
   const leftSidebarState = ref<
     'openStart' | 'openEnd' | 'hiddenStart' | 'hiddenEnd' | 'peekOpenStart' | 'peekOpenEnd' | 'peekCloseOpen' | 'peekCloseEnd'
   >(isLeftSidebarOpen.value ? 'openEnd' : 'hiddenEnd')
 
-  const rightSidebarState = ref<
-    'openStart' | 'openEnd' | 'hiddenStart' | 'hiddenEnd' | 'peekOpenStart' | 'peekOpenEnd' | 'peekCloseOpen' | 'peekCloseEnd'
-  >(isRightSidebarOpen.value ? 'openEnd' : 'hiddenEnd')
+  const mobileNormalizedSidebarSize = computed(() => {
+    if (isMobileMode.value) {
+      return isLeftSidebarOpen.value ? 100 : 0
+    }
+
+    return leftSideBarSize.value.current
+  })
+
+  const leftSidebarWidth = computed(() => (width.value * mobileNormalizedSidebarSize.value) / 100)
 
   return {
     isLeftSidebarOpen,
     isRightSidebarOpen,
-    rightSidebarSize,
     leftSidebarWidthPercent,
     leftSideBarSize,
     leftSidebarState,
-    rightSidebarState,
     leftSidebarWidth,
+    mobileNormalizedSidebarSize,
   }
 })