adds resizeable container to right nav

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>
opensearch-project · Sep 7, 2022 · 3b6c3d3 · 3b6c3d3
1 parent b49ba63
commit 3b6c3d3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git a/src/plugins/wizard/public/application/app.scss b/src/plugins/wizard/public/application/app.scss
@@ -8,9 +8,18 @@
   padding: 0;
   display: grid;
   grid-template:
-    "topNav topNav topNav" min-content
-    "leftNav workspace rightNav" 1fr / #{$wizLeftNavWidth} 1fr #{$wizRightNavWidth};
+    "topNav topNav" min-content
+    "leftNav workspaceNav" 1fr / #{$wizLeftNavWidth} 1fr;
   height: calc(100vh - #{$osdHeaderOffset});
+
+  &__resizeContainer {
+    min-height: 0;
+    background-color: $euiColorEmptyShade;
+  }
+
+  &__resizeButton {
+    transform: translateX(-$euiSizeM / 2);
+  }
 }
 
 .headerIsExpanded .wizLayout {

diff --git a/src/plugins/wizard/public/application/app.tsx b/src/plugins/wizard/public/application/app.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { I18nProvider } from '@osd/i18n/react';
-import { EuiPage } from '@elastic/eui';
+import { EuiPage, EuiResizableContainer } from '@elastic/eui';
 import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
 import { LeftNav } from './components/left_nav';
 import { TopNav } from './components/top_nav';
@@ -21,8 +21,37 @@ export const WizardApp = () => {
         <EuiPage className="wizLayout">
           <TopNav />
           <LeftNav />
-          <Workspace />
-          <RightNav />
+          <EuiResizableContainer className="wizLayout__resizeContainer">
+            {(EuiResizablePanel, EuiResizableButton) => (
+              <>
+                <EuiResizablePanel
+                  className="wizLayout__workspaceResize"
+                  paddingSize="none"
+                  initialSize={80}
+                  minSize="300px"
+                  mode="main"
+                >
+                  <Workspace />
+                </EuiResizablePanel>
+                <EuiResizableButton className="wizLayout__resizeButton" />
+                <EuiResizablePanel
+                  className="wizLayout__rightNavResize"
+                  paddingSize="none"
+                  initialSize={20}
+                  minSize="250px"
+                  mode={[
+                    'collapsible',
+                    {
+                      position: 'top',
+                    },
+                  ]}
+                  id="wizRightResize"
+                >
+                  <RightNav />
+                </EuiResizablePanel>
+              </>
+            )}
+          </EuiResizableContainer>
         </EuiPage>
       </DragDropProvider>
     </I18nProvider>

diff --git a/src/plugins/wizard/public/application/components/side_nav.scss b/src/plugins/wizard/public/application/components/side_nav.scss
@@ -16,6 +16,7 @@
   &.right {
     border-left: $euiBorderThin;
     grid-area: rightNav;
+    height: 100%;
   }
 
   &__header {

diff --git a/src/plugins/wizard/public/application/components/workspace.scss b/src/plugins/wizard/public/application/components/workspace.scss
@@ -10,6 +10,7 @@
   grid-gap: $euiSizeM;
   padding: $euiSizeM;
   background-color: $euiColorEmptyShade;
+  height: 100%;
 
   &__empty {
     height: 100%;