diff --git a/README.md b/README.md
index 1ab27b7..a0c7784 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# tp-element
+# tp-responsive-menu
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e9b22a6
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,134 @@
+{
+ "name": "@tp/tp-responsive-menu",
+ "version": "0.0.1",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "@tp/tp-responsive-menu",
+ "version": "0.0.1",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@tp/tp-media-query": "^1.0.0",
+ "lit": "^2.2.0"
+ }
+ },
+ "node_modules/@lit-labs/ssr-dom-shim": {
+ "version": "1.1.0",
+ "resolved": "https://verdaccio.codeblob.work/@lit-labs%2fssr-dom-shim/-/ssr-dom-shim-1.1.0.tgz",
+ "integrity": "sha512-92uQ5ARf7UXYrzaFcAX3T2rTvaS9Z1//ukV+DqjACM4c8s0ZBQd7ayJU5Dh2AFLD/Ayuyz4uMmxQec8q3U4Ong==",
+ "license": "BSD-3-Clause"
+ },
+ "node_modules/@lit/reactive-element": {
+ "version": "1.6.1",
+ "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.6.1.tgz",
+ "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "@lit-labs/ssr-dom-shim": "^1.0.0"
+ }
+ },
+ "node_modules/@tp/tp-media-query": {
+ "version": "1.0.0",
+ "resolved": "https://verdaccio.codeblob.work/@tp%2ftp-media-query/-/tp-media-query-1.0.0.tgz",
+ "integrity": "sha512-hxwkqgLDGXFmjQEMWxExJW/If1ppFerK9S5+I/P7qCKm3PMRDgafFvAPTpFLtqH3GYQ9z+uAAi2ZSNKqJ9Z7QQ==",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "lit": "^2.2.0"
+ }
+ },
+ "node_modules/@types/trusted-types": {
+ "version": "2.0.3",
+ "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.3.tgz",
+ "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
+ "license": "MIT"
+ },
+ "node_modules/lit": {
+ "version": "2.7.1",
+ "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.7.1.tgz",
+ "integrity": "sha512-t1cVWUVQj+ucdx16QPvqzyHWYTj/bvlv6vRCUuZ5T/dA4W2Ui4a4tz7uJ1IhoTb9rKe3pTJiWmoN2GJGGteszw==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "@lit/reactive-element": "^1.6.0",
+ "lit-element": "^3.3.0",
+ "lit-html": "^2.7.0"
+ }
+ },
+ "node_modules/lit-element": {
+ "version": "3.3.1",
+ "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.3.1.tgz",
+ "integrity": "sha512-Gl+2409uXWbf7n6cCl7Kzasm7zjT9xmdwi2BhLNi70sRKAgRkqueDu5mSIH3hPYMM0/vqBCdPXod3NbGkRA2ww==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "@lit-labs/ssr-dom-shim": "^1.1.0",
+ "@lit/reactive-element": "^1.3.0",
+ "lit-html": "^2.7.0"
+ }
+ },
+ "node_modules/lit-html": {
+ "version": "2.7.1",
+ "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.7.1.tgz",
+ "integrity": "sha512-san46v7VXK6+2RXS4yveQYFUf9CoO/1bcNb0NibxLoTqlP48vs+l28tRPFDYcXGKWm0XoqcDuCC6mxIs8Jj3Zw==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "@types/trusted-types": "^2.0.2"
+ }
+ }
+ },
+ "dependencies": {
+ "@lit-labs/ssr-dom-shim": {
+ "version": "1.1.0",
+ "resolved": "https://verdaccio.codeblob.work/@lit-labs%2fssr-dom-shim/-/ssr-dom-shim-1.1.0.tgz",
+ "integrity": "sha512-92uQ5ARf7UXYrzaFcAX3T2rTvaS9Z1//ukV+DqjACM4c8s0ZBQd7ayJU5Dh2AFLD/Ayuyz4uMmxQec8q3U4Ong=="
+ },
+ "@lit/reactive-element": {
+ "version": "1.6.1",
+ "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.6.1.tgz",
+ "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==",
+ "requires": {
+ "@lit-labs/ssr-dom-shim": "^1.0.0"
+ }
+ },
+ "@tp/tp-media-query": {
+ "version": "1.0.0",
+ "resolved": "https://verdaccio.codeblob.work/@tp%2ftp-media-query/-/tp-media-query-1.0.0.tgz",
+ "integrity": "sha512-hxwkqgLDGXFmjQEMWxExJW/If1ppFerK9S5+I/P7qCKm3PMRDgafFvAPTpFLtqH3GYQ9z+uAAi2ZSNKqJ9Z7QQ==",
+ "requires": {
+ "lit": "^2.2.0"
+ }
+ },
+ "@types/trusted-types": {
+ "version": "2.0.3",
+ "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.3.tgz",
+ "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
+ },
+ "lit": {
+ "version": "2.7.1",
+ "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.7.1.tgz",
+ "integrity": "sha512-t1cVWUVQj+ucdx16QPvqzyHWYTj/bvlv6vRCUuZ5T/dA4W2Ui4a4tz7uJ1IhoTb9rKe3pTJiWmoN2GJGGteszw==",
+ "requires": {
+ "@lit/reactive-element": "^1.6.0",
+ "lit-element": "^3.3.0",
+ "lit-html": "^2.7.0"
+ }
+ },
+ "lit-element": {
+ "version": "3.3.1",
+ "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.3.1.tgz",
+ "integrity": "sha512-Gl+2409uXWbf7n6cCl7Kzasm7zjT9xmdwi2BhLNi70sRKAgRkqueDu5mSIH3hPYMM0/vqBCdPXod3NbGkRA2ww==",
+ "requires": {
+ "@lit-labs/ssr-dom-shim": "^1.1.0",
+ "@lit/reactive-element": "^1.3.0",
+ "lit-html": "^2.7.0"
+ }
+ },
+ "lit-html": {
+ "version": "2.7.1",
+ "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.7.1.tgz",
+ "integrity": "sha512-san46v7VXK6+2RXS4yveQYFUf9CoO/1bcNb0NibxLoTqlP48vs+l28tRPFDYcXGKWm0XoqcDuCC6mxIs8Jj3Zw==",
+ "requires": {
+ "@types/trusted-types": "^2.0.2"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
index c39fdff..d94644e 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,19 @@
{
- "name": "@tp/tp-element",
+ "name": "@tp/tp-responsive-menu",
"version": "0.0.1",
"description": "",
- "main": "tp-element.js",
+ "main": "tp-responsive-menu.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
- "url": "https://gitea.codeblob.work/tp-elements/tp-element.git"
+ "url": "https://gitea.codeblob.work/tp-elements/tp-responsive-menu.git"
},
"author": "trading_peter",
"license": "Apache-2.0",
"dependencies": {
+ "@tp/tp-media-query": "^1.0.0",
"lit": "^2.2.0"
}
}
diff --git a/tp-element.js b/tp-element.js
deleted file mode 100644
index 6a92a2f..0000000
--- a/tp-element.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
-@license
-Copyright (c) 2022 trading_peter
-This program is available under Apache License Version 2.0
-*/
-
-import { LitElement, html, css } from 'lit';
-
-class TpElement extends LitElement {
- static get styles() {
- return [
- css`
- :host {
- display: block;
- }
- `
- ];
- }
-
- render() {
- const { } = this;
-
- return html`
-
- `;
- }
-
- static get properties() {
- return { };
- }
-
-
-}
-
-window.customElements.define('tp-element', TpElement);
diff --git a/tp-responsive-menu.js b/tp-responsive-menu.js
new file mode 100644
index 0000000..3352988
--- /dev/null
+++ b/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`
+
+
+
+
+
+ `;
+ }
+
+ 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);