From d2ea7f18c9cb0ef93abc05a82e9a63105192f4cd Mon Sep 17 00:00:00 2001
From: brokun <yukun.wyk@antgroup.com>
Date: Wed, 24 Jan 2024 01:16:45 +0800
Subject: [PATCH] feat(lab): support visible and hidden switching of side tab
 content area

---
 packages/libro-lab/src/layout/layout-service.ts | 13 +++++++++++++
 packages/libro-lab/src/layout/main.tsx          | 14 +++++++++++++-
 packages/libro-lab/src/module.tsx               |  1 +
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/libro-lab/src/layout/layout-service.ts b/packages/libro-lab/src/layout/layout-service.ts
index 00208c43..ea25e639 100644
--- a/packages/libro-lab/src/layout/layout-service.ts
+++ b/packages/libro-lab/src/layout/layout-service.ts
@@ -1,5 +1,6 @@
 import { LibroNavigatableView, LibroService } from '@difizen/libro-jupyter';
 import type { View, ViewOpenHandlerOptions, ViewOpenOption } from '@difizen/mana-app';
+import { SideTabView } from '@difizen/mana-app';
 import { observable } from '@difizen/mana-app';
 import {
   DefaultSlotView,
@@ -32,6 +33,7 @@ export class LayoutService {
 
   @prop()
   serverSatus: StatusType = 'loading';
+
   @prop()
   visibilityMap: VisibilityMap = {
     [LibroLabLayoutSlots.header]: true,
@@ -96,6 +98,17 @@ export class LayoutService {
     return undefined;
   }
 
+  shouldRenderNavigatorContent(): boolean {
+    if (!this.visibilityMap[LibroLabLayoutSlots.navigator]) {
+      return false;
+    }
+    const slotView = this.slotViewManager.getSlotView(LibroLabLayoutSlots.navigator);
+    if (slotView instanceof SideTabView) {
+      return !!slotView.showTabContent;
+    }
+    return false;
+  }
+
   async onOpenSlotActiveChange() {
     if (this.isAreaVisible(LibroLabLayoutSlots.content)) {
       const slotView = await this.slotViewManager.getOrCreateSlotView(
diff --git a/packages/libro-lab/src/layout/main.tsx b/packages/libro-lab/src/layout/main.tsx
index 5a8f6d15..927dfcb1 100644
--- a/packages/libro-lab/src/layout/main.tsx
+++ b/packages/libro-lab/src/layout/main.tsx
@@ -10,6 +10,18 @@ import { LibroLabLayoutSlots } from './protocol.js';
 export const LibroLabLayoutMainComponent = forwardRef(
   function LibroLabLayoutMainComponent() {
     const layoutService = useInject(LayoutService);
+    const navigatorSize = layoutService.shouldRenderNavigatorContent()
+      ? {
+          minSize: 40,
+          defaultSize: 300,
+          maxSize: undefined,
+        }
+      : {
+          minSize: 40,
+          defaultSize: 40,
+          maxSize: 40,
+          noResize: true,
+        };
 
     return (
       <SplitPanel id="libro-lab-content-layout">
@@ -17,7 +29,7 @@ export const LibroLabLayoutMainComponent = forwardRef(
           <SplitPanel.Pane
             id="libro-lab-content-layout-left"
             className="libro-lab-content-layout-left"
-            defaultSize={300}
+            {...navigatorSize}
           >
             <Slot name={LibroLabLayoutSlots.navigator} />
           </SplitPanel.Pane>
diff --git a/packages/libro-lab/src/module.tsx b/packages/libro-lab/src/module.tsx
index c3c7badd..bcf5afba 100644
--- a/packages/libro-lab/src/module.tsx
+++ b/packages/libro-lab/src/module.tsx
@@ -71,6 +71,7 @@ export const LibroLabModule = ManaModule.create()
       slot: LibroLabLayoutSlots.navigator,
       options: {
         sort: true,
+        contentToggable: true,
       },
     }),
     createViewPreference({