fix(core): update

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.98',
+  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,12 +84,12 @@ 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: 250;
         opacity: 0;
-        padding: 16px;
+        padding: 16px 32px;
         right: 0px;
         top: 0px;
         bottom: 0px;
@@ -73,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