feat(ui-shell): close side-nav when click on the overlay (carbon-desi…

…gn-system#10778)
kennylam · Aug 1, 2023 · 9b0d16a · 9b0d16a
1 parent 3ab77f5
commit 9b0d16a
Showing 1 changed file with 11 additions and 1 deletion.
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/side-nav.ts
@@ -252,6 +252,14 @@ class CDSSideNav extends HostListenerMixin(LitElement) {
     }
   }
 
+  /**
+   * Handles the `click` event for the side nav overlay.
+   *
+   */
+  private _onOverlayClick() {
+    this.expanded = false;
+  }
+
   render() {
     const { collapseMode, expanded, isNotChildOfHeader, isNotPersistent } =
       this;
@@ -273,7 +281,9 @@ class CDSSideNav extends HostListenerMixin(LitElement) {
     });
     return html`${this.collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED
         ? null
-        : html`<div class="${overlayClasses}"></div>`}
+        : html`<div
+            class="${overlayClasses}"
+            @click=${this._onOverlayClick}></div>`}
       <div
         class="${classes}"
         @mouseover="${this._handleNavMouseOver}"