Cleaning up CSS in components and adding in a drawer component.

2020-12-08 09:19:34 -08:00
parent 5f30daca21
commit fd7d647000
10 changed files with 103 additions and 9 deletions
--- a/drawer.js
+++ b/drawer.js
@@ -0,0 +1,94 @@
+import { IgniteElement } from "../ignite-html/ignite-element.js";
+import { IgniteTemplate, div, h1, slot, button } from "../ignite-html/ignite-template.js";
+
+class Drawer extends IgniteElement {
+    constructor() {
+        super();
+    }
+
+    get styles() {
+        return /*css*/`
+            mt-drawer > div {
+                position: relative;
+                background-color: #f8f9fa;
+            }
+
+            mt-drawer > div.absolute {
+                position: absolute;
+            }
+
+            mt-drawer > div.left {
+                left: 0;
+                top: 0;
+                height: 100vh;
+            }
+
+            mt-drawer > div.right {
+                right: 0;
+                top: 0;
+                height: 100vh;
+            }
+
+            mt-drawer > div.top {
+                top: 0;
+                left: 0;
+                width: 100vw;
+            }
+
+            mt-drawer > div.bottom {
+                bottom: 0;
+                left: 0;
+                width: 100vw;
+            }
+
+            mt-drawer > div.show {
+                display: flex;
+                flex-direction: column;
+            }
+
+            mt-drawer > div {
+                display: none;
+            }
+        `;
+    }
+
+    get properties() {
+        return {
+            show: true,
+            responsiveClasses: "d-none d-md-flex",
+            position: "left",
+            width: "20em",
+            height: null,
+            padding: "1em",
+            absolute: true
+        };
+    }
+
+    render() {
+        return this.template
+            .child(
+                new div()
+                    .class(this.responsiveClasses)
+                    .class(this.show, (value) => { return value ? "show" : null })
+                    .class(this.absolute, (value) => { return value ? "absolute" : null })
+                    .class(this.position)
+                    .style("width", this.width)
+                    .style("height", this.height)
+                    .style("padding", this.padding)
+                    .child(new button().class("btn btn-none").child("<i class='fas fa-chevron-left'></i>"))
+                    .child(new slot(this))
+            );
+    }
+}
+
+class DrawerTemplate extends IgniteTemplate {
+    constructor(...children) {
+        super("mt-drawer", children);
+    }
+}
+
+export {
+    DrawerTemplate as Drawer
+};
+
+customElements.define("mt-drawer", Drawer);