feat(gui-v2): add toggle for tree view sidebar

packages/nc-gui-v2/app.vue

@@ -8,7 +8,7 @@ const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const { signOut, signedIn, isLoading, user } = $(useGlobal())
 
-const { isOpen, hasSidebar } = useSidebar({ isOpen: signedIn && breakpoints.greater('md').value })
+const { isOpen, toggle, hasSidebar } = useSidebar({ isOpen: signedIn && breakpoints.greater('md').value })
 
 const sidebar = ref<HTMLDivElement>()
 
@@ -18,21 +18,12 @@ const logout = () => {
   signOut()
   navigateTo('/signin')
 }
-
-const sidebarCollapsed = computed({
-  get: () => !isOpen.value,
-  set: (val) => (isOpen.value = !val),
-})
-
-const toggleSidebar = () => {
-  sidebarCollapsed.value = !sidebarCollapsed.value
-}
 </script>
 
 <template>
   <a-layout class="min-h-[100vh]">
     <a-layout-header class="hidden flex !bg-primary items-center text-white px-4 shadow-md">
-      <material-symbols-menu v-if="signedIn && hasSidebar" class="text-xl cursor-pointer" @click="toggleSidebar" />
+      <material-symbols-menu v-if="signedIn && hasSidebar" class="text-xl cursor-pointer" @click="toggle" />
 
       <div class="flex-1" />
 
@@ -85,7 +76,7 @@ const toggleSidebar = () => {
     </a-layout-header>
 
     <a-layout-sider
-      v-model:collapsed="sidebarCollapsed"
+      :collapsed="!isOpen"
       width="300"
       collapsed-width="0"
       class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"

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

@@ -142,7 +142,7 @@ const addTableTab = (table: TableType) => {
 </script>
 
 <template>
-  <div class="nc-treeview-container flex flex-column">
+  <div class="nc-treeview-container flex flex-col">
     <div class="px-2 py-[11.75px] border-b-1">
       <a-input-search
         v-model:value="filterQuery"

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

@@ -5,6 +5,9 @@ interface UseSidebarProps {
   isOpen?: boolean
 }
 
+/**
+ * Injection state for the left sidebar
+ */
 const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => {
   const [isOpen, toggle] = useToggle(props.isOpen ?? false)
   const [hasSidebar, toggleHasSidebar] = useToggle(props.hasSidebar ?? true)

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { useProject, useRoute, useSidebar, useTabs } from '#imports'
+import { useProject, useRoute, useSidebar, useTabs, useToggle } from '#imports'
 import { TabType } from '~/composables'
+import MaterialSymbolsChevronRightRounded from '~icons/material-symbols/chevron-right-rounded'
+import MaterialSymbolsChevronLeftRounded from '~icons/material-symbols/chevron-left-rounded'
 
 const route = useRoute()
 
@@ -8,7 +10,9 @@ const { loadProject, loadTables } = useProject(route.params.projectId as string)
 
 const { addTab, clearTabs } = useTabs()
 
-useSidebar({ isOpen: true })
+useSidebar({ hasSidebar: true, isOpen: true })
+
+const [isOpen, toggle] = useToggle(true)
 
 clearTabs()
 if (!route.params.type) {
@@ -23,12 +27,28 @@ await loadTables()
 <template>
   <NuxtLayout id="sidebar-right" class="flex">
     <a-layout-sider
+      :collapsed="!isOpen"
       width="250"
       collapsed-width="0"
-      class="bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
+      class="relative bg-white dark:!bg-gray-800 border-r-1 border-gray-200 dark:!border-gray-600 h-full"
       :trigger="null"
       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"
+      >
+        <MaterialSymbolsChevronLeftRounded
+          v-if="isOpen"
+          class="transform group-hover:(scale-110 text-pink-500) text-xl text-gray-400"
+          @click="toggle(false)"
+        />
+
+        <MaterialSymbolsChevronRightRounded
+          v-else
+          class="transform group-hover:(scale-110 text-pink-500) text-xl text-gray-400"
+          @click="toggle(true)"
+        />
+      </div>
       <DashboardTreeView />
     </a-layout-sider>