refactor(gui-v2): move sidebar toolbar items to separate directory

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

@@ -2,8 +2,8 @@
 import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
-import Toolbar from './Toolbar.vue'
+import Toolbar from './toolbar/index.vue'
-import { computed, inject, provide, ref, useApi, useViews, watch } from '#imports'
+import { computed, inject, provide, ref, useApi, useRoute, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 import MdiXml from '~icons/mdi/xml'
 import MdiHook from '~icons/mdi/hook'

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

@@ -54,6 +54,7 @@ const Icon = computed(() => {
     <div class="nc-sidebar-right-item hover:after:bg-indigo-500 group">
       <Icon class="cursor-pointer group-hover:(!text-white)" />
     </div>
+
     <template #overlay>
       <div class="min-w-[350px] max-w-[500px] shadow bg-white">
         <div>

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

@@ -1,24 +1,32 @@
+<script lang="ts" setup>
+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>
   <div class="flex gap-2">
     <slot name="start" />
 
-    <SmartsheetToolbarLockMenu />
+    <LockMenu />
 
     <div class="dot" />
 
-    <SmartsheetToolbarReload />
+    <Reload />
 
     <div class="dot" />
 
-    <SmartsheetToolbarAddRow />
+    <AddRow />
 
     <div class="dot" />
 
-    <SmartsheetToolbarDeleteTable />
+    <DeleteTable />
 
     <div class="dot" />
 
-    <SmartsheetToolbarToggleDrawer />
+    <ToggleDrawer />
 
     <slot name="end" />
   </div>