diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index b89d31c..6a50fc7 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/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'
}
diff --git a/ts_web/elements/dees-mobilenavigation.ts b/ts_web/elements/dees-mobilenavigation.ts
index 457b4c8..308e9ba 100644
--- a/ts_web/elements/dees-mobilenavigation.ts
+++ b/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`
+
+ `;
+
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`
+
${this.heading}
${this.menuItems.map((menuItem) => {
return html`