First version

tp-responsive-menu.js

@@ -0,0 +1,83 @@
+/**
+@license
+Copyright (c) 2022 trading_peter
+This program is available under Apache License Version 2.0
+*/
+
+import '@tp/tp-media-query/tp-media-query.js';
+import { LitElement, html, css } from 'lit';
+
+class TpResponsiveMenu extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+        }
+
+        .content {
+          display: flex;
+          flex-direction: column;
+          background: #ffffff;
+        }
+
+        :host([responsive]) .content {
+          position: fixed;
+          z-index: 9999;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          transform: translateX(-100%);
+          transition: transform 400ms ease-in-out;
+        }
+
+        :host([responsive][visible]) .content {
+          transform: translateX(0);
+        }
+      `
+    ];
+  }
+
+  render() {
+    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">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      responsive: { type: Boolean, reflect: true },
+      responsiveWidth: { type: String },
+      visible: { type: Boolean, reflect: true },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.responsiveWidth = '480';
+    this.visible = false;
+  }
+
+  open() {
+    this.visible = true;
+  }
+
+  close() {
+    this.visible = false;
+  }
+
+  toggle() {
+    this.visible = !this.visible;
+  }
+
+  _queryUpdated(e) {
+    this.responsive = e.detail;
+  }
+}
+
+window.customElements.define('tp-responsive-menu', TpResponsiveMenu);