From eb8b2779188a4919a0c5a34d4c25d513c2ba80e4 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Sat, 2 Sep 2023 00:17:38 +0200
Subject: [PATCH] Various improvements.

---
 tp-responsive-menu.js | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/tp-responsive-menu.js b/tp-responsive-menu.js
index 3352988..ae0141d 100644
--- a/tp-responsive-menu.js
+++ b/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;
-          z-index: 9999;
+          position: absolute;
           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>
     `;
   }