From 9b0d16a8f39657c7521983ac7a8a9fa57527b25c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Abd=C3=B3n=20Rodr=C3=ADguez?= <abdon@ibm.com>
Date: Tue, 1 Aug 2023 22:01:38 +0200
Subject: [PATCH] feat(ui-shell): close side-nav when click on the overlay
 (#10778)

---
 .../src/components/ui-shell/side-nav.ts              | 12 +++++++++++-
 1 file changed, 11 insertions(+), 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
index 05b9f41bafd7..56007228fad3 100644
--- 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}"