fix(app-shell): enhancement to be resizable app-shell

Teradata · Apr 29, 2024 · 895965c · 895965c
1 parent 7cd5f1e
commit 895965c
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 7 deletions.
diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss
@@ -100,10 +100,6 @@
     .cov-drawer--open & {
       margin-left: 256px;
     }
-
-    .cov-help--open & {
-      margin-right: 320px;
-    }
   }
 
   @media only screen and (max-width: 1600px) {
@@ -115,14 +111,42 @@
 
 .help {
   grid-area: help;
-  position: fixed;
+  position: relative;
   right: 0;
+  overflow: hidden;
   width: 320px;
   height: 100vh;
   overflow-y: auto;
   transition-property: width;
   transition-duration: 200ms;
 
+  .resize-handle {
+    position: absolute;
+    left: 0;
+    width: 10px;
+    height: 100vh;
+    cursor: ew-resize;
+    z-index: 1100;
+    user-select: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 0;
+      width: 2px;
+      height: 100%;
+      background-color: var(--mdc-theme-primary);
+      transform: translateX(-50%);
+      transition: opacity 0.3s ease;
+      opacity: 0;
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+
   .cov-help--closed & {
     width: 0;
     border: none;

diff --git a/libs/components/src/app-shell/app-shell.ts b/libs/components/src/app-shell/app-shell.ts
@@ -31,6 +31,11 @@ export class CovalentAppShell extends DrawerBase {
     `,
   ];
 
+  element = document.querySelector('.help');
+  helpWidth = 0;
+  private _startX!: number;
+  private _startWidth!: number;
+
   @queryAssignedElements({ slot: 'navigation' })
   navigationListElements!: HTMLElement[];
 
@@ -77,10 +82,79 @@ export class CovalentAppShell extends DrawerBase {
 
   constructor() {
     super();
-
+    this._resize = this._resize.bind(this);
+    this._stopResize = this._stopResize.bind(this);
+    this._startResizing = this._startResizing.bind(this);
+    this._setupEventListeners();
+    window.addEventListener('DOMContentLoaded', () => {
+      this.setupHelpPanelListeners();
+    });
     this.resizeEvent();
   }
 
+  setupHelpPanelListeners() {
+    const helpToggle = document.querySelector('.help-item');
+    const helpClose = document.querySelector('.help-close');
+
+    helpToggle?.addEventListener('click', () => {
+      this.toggleHelpPanel();
+    });
+
+    helpClose?.addEventListener('click', () => {
+      this.toggleHelpPanel(false);
+    });
+  }
+
+  toggleHelpPanel(open?: boolean) {
+    this.helpOpen = open !== undefined ? open : !this.helpOpen;
+    if (window.innerWidth > 768) {
+      this.helpWidth = this.helpOpen ? 320 : 0;
+    } else {
+      this.helpWidth = this.helpOpen ? window.innerWidth : 0;
+    }
+    this.requestUpdate();
+  }
+
+  private _setupEventListeners() {
+    window.addEventListener('DOMContentLoaded', () => {
+      const helpToggle = document.querySelector('.help-item');
+      const helpClose = document.querySelector('.help-close');
+
+      helpToggle?.addEventListener('click', () => {
+        this.helpOpen = !this.helpOpen;
+        this.helpWidth = this.helpOpen ? 320 : 0;
+        this.requestUpdate();
+      });
+
+      helpClose?.addEventListener('click', () => {
+        this.helpOpen = false;
+        this.helpWidth = 0;
+        this.requestUpdate();
+      });
+    });
+  }
+
+  private _startResizing(event: MouseEvent) {
+    this._startX = event.clientX;
+    this._startWidth = this.helpWidth;
+    document.addEventListener('mousemove', this._resize);
+    document.addEventListener('mouseup', this._stopResize);
+  }
+
+  private _resize(event: MouseEvent) {
+    const diff = event.clientX - this._startX;
+    const newWidth = Math.max(320, Math.min(600, this._startWidth - diff));
+    if (this.helpWidth !== newWidth) {
+      this.helpWidth = newWidth;
+      this.requestUpdate();
+    }
+  }
+
+  private _stopResize() {
+    document.removeEventListener('mousemove', this._resize);
+    document.removeEventListener('mouseup', this._stopResize);
+  }
+
   private _toggleOpen(forcedOpen = false) {
     if (this.mdcFoundation.isOpening() || this.mdcFoundation.isClosing()) {
       return;
@@ -229,7 +303,12 @@ export class CovalentAppShell extends DrawerBase {
             ${this.renderMain()}
           </div>
         </div>
-        <div class="help">
+        <div
+          class="help"
+          style="width: ${this.helpWidth}px;"
+          @mousedown="${this._startResizing}"
+        >
+          <div class="resize-handle"></div>
           <slot name="help"></slot>
         </div>
       </div>