fix(app-shell): fix nav-list menu (#2162)

Teradata · May 21, 2024 · 80f7780 · 80f7780
1 parent f5e3986
commit 80f7780
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss
@@ -68,6 +68,7 @@
   height: 100vh;
   grid-area: main;
   overflow: auto;
+  transition: margin-left 200ms ease-in-out;
 
   .main-wrapper {
     margin: 0 auto;
@@ -99,6 +100,10 @@
     .cov-drawer--open & {
       margin-left: 256px;
     }
+
+    .cov-help--open & {
+      margin-right: var(--cv-help-width, 320px);
+    }
   }
 
   @media only screen and (max-width: 1600px) {
@@ -112,7 +117,7 @@
   grid-area: help;
   position: fixed;
   right: 0;
-  width: var(--help-width, 320px);
+  width: var(--cv-help-width, 320px);
   height: 100vh;
   overflow-y: auto;
 
@@ -144,6 +149,14 @@
     }
   }
 
+  :host([resizing]) .resize-handle {
+    display: block;
+  }
+
+  :host(:not([resizing])) .resize-handle {
+    display: none;
+  }
+
   .cov-help--closed & {
     width: 0;
     border: none;
@@ -291,6 +304,7 @@ nav.navigation {
 
   .mdc-drawer--open {
     width: 256px;
+    transition-duration: 200ms;
   }
 
   .mdc-drawer--opening {

diff --git a/libs/components/src/app-shell/app-shell.stories.js b/libs/components/src/app-shell/app-shell.stories.js
@@ -22,6 +22,7 @@ export default {
   args: {
     contained: true,
     fullWidth: false,
+    resizing: true,
   },
   argTypes: {
     navClick: { action: 'clicked' },
@@ -53,6 +54,7 @@ const Template = ({
   forcedOpen = false,
   contained = true,
   fullWidth = false,
+  resizing = true,
 }) => {
   document.addEventListener(
     'DOMContentLoaded',
@@ -102,6 +104,8 @@ const Template = ({
     ${forcedOpen ? `forcedOpen open` : ''}
     ${contained ? `contained` : ''}
     ${fullWidth ? `fullWidth` : ''}
+    ${resizing ? `resizing` : ''}
+    
     >
 
       <cv-icon-button slot="section-action" icon="arrow_back"></cv-icon-button>
@@ -312,3 +316,8 @@ export const fullWidth = Template.bind({});
 fullWidth.args = {
   fullWidth: true,
 };
+
+export const resizing = Template.bind({});
+resizing.args = {
+  resizing: true,
+};
diff --git a/libs/components/src/app-shell/app-shell.ts b/libs/components/src/app-shell/app-shell.ts
@@ -60,6 +60,12 @@ export class CovalentAppShell extends DrawerBase {
   @property({ type: Boolean, reflect: true })
   helpOpen = false;
 
+  /**
+   * Make help resizable with drag/drop handle
+   */
+  @property({ type: Boolean, reflect: true })
+  helpResizable = false;
+
   /**
    * Wrap the main area with a contained card surface
    */
@@ -82,13 +88,13 @@ export class CovalentAppShell extends DrawerBase {
 
   constructor() {
     super();
+    this.resizeEvent();
     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();
       const storedWidth = localStorage.getItem('helpWidth');
       if (storedWidth) {
         this.helpWidth = parseInt(storedWidth, 10);
@@ -141,27 +147,9 @@ export class CovalentAppShell extends DrawerBase {
     });
   }
 
-  override firstUpdated() {
-    const resizeHandle = this.shadowRoot?.querySelector('.resize-handle');
-    if (resizeHandle) {
-      resizeHandle.addEventListener('mousedown', (event) => {
-        if (event instanceof MouseEvent) {
-          this._startResizing(event);
-        }
-      });
-
-      resizeHandle.addEventListener('dblclick', () => {
-        if (this.helpWidth > 320 || this.helpWidth !== 320) {
-          this.helpWidth = 320;
-          localStorage.setItem('helpWidth', '320');
-          this.updateHelpPanelWidth();
-          this.requestUpdate();
-        }
-      });
-    }
-  }
-
   private _startResizing(event: MouseEvent) {
+    if (!this.helpResizable) return;
+
     const resizeHandle = this.shadowRoot?.querySelector('.resize-handle');
     if (event.target === resizeHandle) {
       this._startX = event.clientX;
@@ -170,6 +158,15 @@ export class CovalentAppShell extends DrawerBase {
       document.addEventListener('mouseup', this._stopResize);
       (event.target as HTMLElement).classList.add('resizing');
     }
+
+    resizeHandle?.addEventListener('dblclick', () => {
+      if (this.helpWidth > 320 || this.helpWidth !== 320) {
+        this.helpWidth = 320;
+        localStorage.setItem('helpWidth', '320');
+        this.updateHelpPanelWidth();
+        this.requestUpdate();
+      }
+    });
   }
 
   private _resize(event: MouseEvent) {
@@ -213,13 +210,10 @@ export class CovalentAppShell extends DrawerBase {
   }
 
   private updateHelpPanelWidth() {
-    const helpPanel = this.shadowRoot?.querySelector('.help') as HTMLElement;
-    const mainPanel = this.shadowRoot?.querySelector('.main') as HTMLElement;
-
-    if (helpPanel && mainPanel) {
-      helpPanel.style.setProperty('--help-width', `${this.helpWidth}px`);
-      mainPanel.style.marginRight = `${this.helpWidth}px`;
-    }
+    const appShell = this.shadowRoot?.querySelector(
+      '.app-shell'
+    ) as HTMLElement;
+    appShell?.style.setProperty('--cv-help-width', `${this.helpWidth}px`);
   }
 
   private _handleMenuClick() {
@@ -357,7 +351,9 @@ export class CovalentAppShell extends DrawerBase {
           </div>
         </div>
         <div class="help" @mousedown="${this._startResizing}">
-          <div class="resize-handle"></div>
+          ${this.helpResizable
+            ? html`<div class="resize-handle"></div>`
+            : nothing}
           <slot name="help"></slot>
         </div>
       </div>

diff --git a/package-lock.json b/package-lock.json