Various improvements.

tp-responsive-menu.js

@@ -13,27 +13,49 @@ class TpResponsiveMenu extends LitElement {
       css`
         :host {
           display: block;
+          pointer-events: none;
         }
 
         .content {
           display: flex;
           flex-direction: column;
           background: #ffffff;
+          z-index: 1;
+          pointer-events: all;
+        }
+
+        :host([responsive]) {
+          position: fixed;
+          inset: 0;
+          z-index: 9999;
         }
 
         :host([responsive]) .content {
-          position: fixed;
+          position: absolute;
-          z-index: 9999;
           top: 0;
           left: 0;
           bottom: 0;
           transform: translateX(-100%);
-          transition: transform 400ms ease-in-out;
+          transition: transform 300ms ease-in-out;
         }
 
         :host([responsive][visible]) .content {
           transform: translateX(0);
         }
+
+        .backdrop {
+          position: absolute;
+          inset: 0;
+          background: #000000;
+          opacity: 0;
+          transition: opacity 300ms ease-in-out;
+          pointer-events: none;
+        }
+
+        :host([visible]) .backdrop {
+          opacity: 0.7;
+          pointer-events: all;
+        }
       `
     ];
   }
@@ -42,9 +64,11 @@ class TpResponsiveMenu extends LitElement {
     return html`
       <tp-media-query query="(min-width: 0) and (max-width: ${this.responsiveWidth}px)" @media-query-update=${this._queryUpdated}></tp-media-query>
 
-      <div class="content">
+      <div class="content" part="content">
         <slot></slot>
       </div>
+
+      <div class="backdrop" @click=${this.close}></div>
     `;
   }