1.0.99

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.97",
+      "version": "1.0.99",
       "license": "MIT",
       "dependencies": {
         "@designestate/dees-domtools": "^2.0.23",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.97',
+  version: '1.0.99',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-mobilenavigation.ts

@@ -12,6 +12,26 @@ import { DeesWindowLayer } from './dees-windowlayer.js';
 
 @customElement('dees-mobilenavigation')
 export class DeesMobilenavigation extends DeesElement {
+  // STATIC
+  public static demo = () => html`
+    <dees-mobilenavigation
+      .menuItems="${[
+        {
+          name: 'hello1',
+          action: async () => {},
+        },
+        {
+          name: 'hello2',
+          action: async () => {},
+        },
+        {
+          name: 'hello3',
+          action: async () => {},
+        },
+      ]}"
+    ></dees-mobilenavigation>
+  `;
+
   private static singletonRef: DeesMobilenavigation;
   public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
     if (!this.singletonRef) {
@@ -27,12 +47,24 @@ export class DeesMobilenavigation extends DeesElement {
 
   // INSTANCE
   @property({
-    type: Object,
+    type: Array,
+  })
+  public heading: string = `MENU`;
+
+  @property({
+    type: Array,
   })
   public menuItems: plugins.tsclass.website.IMenuItem[] = [];
 
   readyDeferred = domtools.plugins.smartpromise.defer();
 
+  constructor() {
+    super();
+    this.init().then(() => {
+      this.show();
+    });
+  }
+
   /**
    * inits the mobile navigation
    */
@@ -52,13 +84,15 @@ export class DeesMobilenavigation extends DeesElement {
         will-change: transform;
         position: fixed;
         height: 100vh;
-        min-width: 370px;
+        min-width: 280px;
         transform: translateX(200px);
         color: #fff;
-        z-index: 100;
+        z-index: 250;
         opacity: 0;
-        padding: 16px;
+        padding: 16px 32px;
         right: 0px;
+        top: 0px;
+        bottom: 0px;
         background: #000;
         border-left: 1px dashed #444;
         pointer-events: none;
@@ -71,20 +105,34 @@ export class DeesMobilenavigation extends DeesElement {
       }
 
       .menuItem {
-        text-align: center;
+        text-align: left;
         padding: 8px;
+        margin-left: -8px;
+        margin-right: -8px;
         cursor: pointer;
         border-radius: 3px;
       }
       .menuItem:hover {
         background: #333;
       }
+
+      .heading {
+        text-align: left;
+        font-size: 24px;
+        padding: 8px 0px;
+        font-family: 'Roboto';
+        font-weight: 300;
+        border-bottom: 1px dashed #444;
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
     `,
   ];
 
   public render() {
     return html`
       <div class="main">
+        <div class="heading">${this.heading}</div>
         ${this.menuItems.map((menuItem) => {
           return html`
             <div
@@ -134,7 +182,7 @@ export class DeesMobilenavigation extends DeesElement {
     this.windowLayer.hide();
   }
 
-  async disconnectedCallback () {
+  async disconnectedCallback() {
     document.body.removeChild(this.windowLayer);
   }
 }

ts_web/elements/dees-windowlayer.ts

@@ -42,6 +42,7 @@ export class DeesWindowLayer extends DeesElement {
           background: rgba(0, 0, 0, 0.0);
           backdrop-filter: brightness(1);
           pointer-events: none;
+          z-index: 200;
         }
         
         .visible {