From 80a8d2a8f8d8a88c6d0e84f7dd7dac11817d404b Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Tue, 8 Dec 2020 11:18:51 -0800
Subject: [PATCH] Drawer is now responsive and mobile friendly.

---
 drawer.js | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 115 insertions(+), 8 deletions(-)

diff --git a/drawer.js b/drawer.js
index 1488bad..50728cf 100644
--- a/drawer.js
+++ b/drawer.js
@@ -1,5 +1,6 @@
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, div, h1, slot, button } from "../ignite-html/ignite-template.js";
+import { IgniteProperty } from "../ignite-html/ignite-html.js";
 
 class Drawer extends IgniteElement {
     constructor() {
@@ -41,21 +42,73 @@ class Drawer extends IgniteElement {
                 width: 100vw;
             }
 
-            mt-drawer > div.show {
+            mt-drawer > div {
                 display: flex;
                 flex-direction: column;
             }
 
-            mt-drawer > div {
+            mt-drawer > div.mobile {
                 display: none;
+                position: absolute;
+                z-index: 999999;
+                box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+            }
+
+            mt-drawer > .open-btn {
+                position: absolute;
+                z-index: 999999;
+                width: 2.5em;
+                height: 2.5em;
+                font-size: 1.2em;
+                background-color: white;
+                border: none;
+                outline: none !important;
+                left: 1em;
+                bottom: 1em;
+                box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+                border-radius: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+            }
+
+            mt-drawer > div > .close-btn {
+                position: absolute;
+                z-index: 999999;
+                width: 2.5em;
+                height: 2.5em;
+                font-size: 1.2em;
+                background-color: white;
+                border: none;
+                outline: none !important;
+                right: -3em;
+                top: 0.5em;
+                box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+                border-radius: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
             }
         `;
     }
 
     get properties() {
         return {
-            show: true,
-            responsiveClasses: "d-none d-md-flex",
+            show: false,
+            responsive: new IgniteProperty(true, (oldValue, value) => {
+                //If responsive is false and mobile is true, set mobile to false.
+                if (!value && this.mobile) {
+                    this.mobile = false;
+                }
+
+                this.update(); //If responsive is changed we must update.
+            }),
+            breakpoint: new IgniteProperty(768, () => {
+                this.update(); //If responsive is changed we must update.
+            }),
+            mobile: false,
             position: "left",
             width: "20em",
             height: null,
@@ -64,21 +117,75 @@ class Drawer extends IgniteElement {
         };
     }
 
+    init() {
+        this.resizeListener = () => this.update();
+
+        window.addEventListener("resize", this.resizeListener);
+
+        this.pushStateListener = () => this.onRouteChange();
+        this.popStateListener = () => this.onRouteChange();
+
+        window.addEventListener("popstate", this.popStateListener);
+        window.addEventListener("pushstate", this.pushStateListener);
+
+        //Run the first update
+        this.update();
+    }
+
     render() {
         return this.template
             .child(
+                new button()
+                    .class("open-btn")
+                    .show([this.mobile, this.show], (mobile, show) => mobile && !show)
+                    .onClick(() => this.show = true)
+                    .child("<i class='fas fa-chevron-right'></i>"),
                 new div()
-                    .class(this.responsiveClasses)
-                    .class(this.show, (value) => { return value ? "show" : null })
-                    .class(this.absolute, (value) => { return value ? "absolute" : null })
+                    .class(this.absolute, value => value ? "absolute" : null)
+                    .class(this.mobile, value => value ? "mobile" : 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>"))
+                    .style("display", this.show, true, value => value ? "flex" : null)
+                    .child(
+                        new button()
+                            .class("close-btn")
+                            .show([this.mobile, this.show], (mobile, show) => mobile && show)
+                            .onClick(() => this.show = false)
+                            .child("<i class='fas fa-chevron-left'></i>")
+                    )
                     .child(new slot(this))
             );
     }
+
+    ready() {
+        //Make sure we update in case responsive is changed.
+        this.update();
+    }
+
+    update() {
+        if (this.responsive) {
+            if (window.innerWidth <= this.breakpoint && !this.mobile) {
+                this.mobile = true;
+            } else if (window.innerWidth > this.breakpoint && this.mobile) {
+                this.mobile = false;
+            }
+        }
+    }
+
+    onRouteChange() {
+        //If a route changed and we are mobile and being shown, hide ourself.
+        if (this.mobile && this.show) {
+            this.show = false;
+        }
+    }
+
+    cleanup() {
+        window.removeEventListener("resize", this.resizeListener);
+        window.removeEventListener("popstate", this.popStateListener);
+        window.removeEventListener("pushstate", this.pushStateListener);
+    }
 }
 
 class DrawerTemplate extends IgniteTemplate {