refactor(gui-v2): replace right side drawer toggle

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

@@ -3,10 +3,12 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
-import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
+import { computed, inject, provide, ref, useApi, useRoute, useToggle, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'
+import MaterialSymbolsChevronRightRounded from '~icons/material-symbols/chevron-right-rounded'
+import MaterialSymbolsChevronLeftRounded from '~icons/material-symbols/chevron-left-rounded'
 
 const meta = inject(MetaInj, ref())
 
@@ -68,7 +70,30 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 </script>
 
 <template>
-  <a-layout-sider :collapsed="sidebarCollapsed" collapsiple collapsed-width="50" width="250" class="shadow h-full" theme="light">
+  <a-layout-sider
+    :collapsed="sidebarCollapsed"
+    collapsiple
+    collapsed-width="50"
+    width="250"
+    class="relative shadow h-full"
+    theme="light"
+  >
+    <div
+      class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-9 left-[-0.75rem] shadow bg-gray-100 rounded-full"
+    >
+      <MaterialSymbolsChevronRightRounded
+        v-if="sidebarOpen"
+        class="transform group-hover:(scale-110 text-pink-500) text-xl text-gray-400"
+        @click="sidebarOpen = false"
+      />
+
+      <MaterialSymbolsChevronLeftRounded
+        v-else
+        class="transform group-hover:(scale-110 text-pink-500) text-xl text-gray-400"
+        @click="sidebarOpen = true"
+      />
+    </div>
+
     <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]">

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

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-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 sidebarOpen = inject(RightSidebarInj, ref(false))
-</script>
-
-<template>
-  <a-tooltip :placement="sidebarOpen ? 'bottomRight' : 'left'">
-    <template #title> {{ $t('tooltip.toggleNavDraw') }} </template>
-
-    <div class="nc-sidebar-right-item hover:after:bg-pink-500 group">
-      <MdiUnfoldLessVertical v-if="sidebarOpen" class="group-hover:(!text-white)" @click="sidebarOpen = false" />
-      <MdiUnfoldMoreVertical v-else class="group-hover:(!text-white)" @click="sidebarOpen = true" />
-    </div>
-  </a-tooltip>
-</template>

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

@@ -3,7 +3,6 @@ import AddRow from './AddRow.vue'
 import DeleteTable from './DeleteTable.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
-import ToggleDrawer from './ToggleDrawer.vue'
 </script>
 
 <template>
@@ -24,10 +23,6 @@ import ToggleDrawer from './ToggleDrawer.vue'
 
     <DeleteTable />
 
-    <div class="dot" />
-
-    <ToggleDrawer />
-
     <slot name="end" />
   </div>
 </template>

packages/nc-gui-v2/pages/nc/[projectId]/index.vue

@@ -35,7 +35,7 @@ await loadTables()
       collapsible
     >
       <div
-        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-10 right-[-0.75rem] shadow bg-gray-200 rounded-full"
+        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-9 right-[-0.75rem] shadow bg-gray-100 rounded-full"
       >
         <MaterialSymbolsChevronLeftRounded
           v-if="isOpen"