Merge pull request #2936 from nocodb/refactor/menu-toggle

refactor(gui-v2): change right sidebar toggle icons

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

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import MdiMenuClose from '~icons/mdi/menu-close'
 import MdiUnfoldMoreVertical from '~icons/mdi/unfold-more-vertical'
 import MdiUnfoldLessVertical from '~icons/mdi/unfold-less-vertical'
+import { inject, ref } from '#imports'
+import { RightSidebarInj } from '~/context'
 
-const drawerOpen = inject('navDrawerOpen', ref(false))
+const sidebarOpen = inject(RightSidebarInj, ref(false))
 </script>
 
 <template>
   <a-tooltip placement="left">
     <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
+
     <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
-      <MdiUnfoldLessVertical class="group-hover:(!text-white)" v-if="drawerOpen" @click="drawerOpen = !drawerOpen" />
+      <MdiUnfoldLessVertical v-if="sidebarOpen" class="group-hover:(!text-white)" @click="sidebarOpen = false" />
-      <MdiUnfoldMoreVertical class="group-hover:(!text-white)" v-else @click="drawerOpen = !drawerOpen" />
+      <MdiUnfoldMoreVertical v-else class="group-hover:(!text-white)" @click="sidebarOpen = true" />
     </div>
   </a-tooltip>
 </template>

packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@@ -216,7 +216,7 @@ function onDeleted() {
 
 <style lang="scss">
 .nc-views-menu {
-  @apply flex-1 max-h-[50vh] md:max-h-[200px] lg:max-h-[400px] xl:max-h-[600px] overflow-y-scroll scrollbar-thin-primary;
+  @apply flex-1 max-h-[200px] overflow-y-scroll scrollbar-thin-primary;
 
   .ghost,
   .ghost > * {

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

@@ -3,8 +3,8 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './Toolbar.vue'
-import { inject, provide, ref, useApi, useViews, watch } from '#imports'
+import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports'
-import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
+import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'
 
@@ -19,9 +19,9 @@ const { api } = useApi()
 provide(ViewListInj, views)
 
 /** Sidebar visible */
-const drawerOpen = inject('navDrawerOpen', ref(true))
+const sidebarOpen = inject(RightSidebarInj, ref(true))
 
-const sidebarCollapsed = computed(() => !drawerOpen.value)
+const sidebarCollapsed = computed(() => !sidebarOpen.value)
 
 /** View type to create from modal */
 let viewCreateType = $ref<ViewTypes>()
@@ -68,7 +68,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     style="height: calc(100% + 9px)"
     theme="light"
   >
-    <Toolbar v-if="drawerOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
+    <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
 
     <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
       <template #start>
@@ -94,7 +94,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
       </template>
     </Toolbar>
 
-    <div v-if="drawerOpen" class="flex-1 flex flex-col">
+    <div v-if="sidebarOpen" class="flex-1 flex flex-col">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
       <a-divider class="my-2" />

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -3,7 +3,7 @@ import type { ColumnType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import { computed, inject, provide, useMetas, watch, watchEffect } from '#imports'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/context'
+import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, RightSidebarInj, TabMetaInj } from '~/context'
 import type { TabItem } from '~/composables'
 
 const { getMeta, metas } = useMetas()
@@ -33,7 +33,7 @@ provide(ActiveViewInj, activeView)
 provide(IsLockedInj, false)
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
-provide('navDrawerOpen', ref(true))
+provide(RightSidebarInj, ref(true))
 
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
   if (newTabMeta !== oldTabMeta && newTabMeta.id) await getMeta(newTabMeta.id)

packages/nc-gui-v2/context/index.ts

@@ -19,3 +19,5 @@ export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')
 export const FieldsInj: InjectionKey<Ref<any[]>> = Symbol('fields-injection')
 export const ViewListInj: InjectionKey<Ref<(GridType | FormType | KanbanType | GalleryType)[]>> = Symbol('view-list-injection')
+
+export const RightSidebarInj: InjectionKey<Ref<boolean>> = Symbol('right-sidebar-injection')