From b75d121cb3c9e3ad5dd08bcd847dca9b9e4cee48 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Tue, 8 Dec 2020 11:29:23 -0800
Subject: [PATCH] Added better drawer position support.

---
 drawer.js | 42 +++++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/drawer.js b/drawer.js
index 50728cf..ba34b82 100644
--- a/drawer.js
+++ b/drawer.js
@@ -18,25 +18,33 @@ class Drawer extends IgniteElement {
                 position: absolute;
             }
 
-            mt-drawer > div.left {
+            mt-drawer.left {
+                order: 0;
+            }
+
+            mt-drawer.left > div {
                 left: 0;
                 top: 0;
                 height: 100vh;
             }
 
-            mt-drawer > div.right {
+            mt-drawer.right {
+                order: 9999;
+            }
+
+            mt-drawer.right > div {
                 right: 0;
                 top: 0;
                 height: 100vh;
             }
 
-            mt-drawer > div.top {
+            mt-drawer.top > div {
                 top: 0;
                 left: 0;
                 width: 100vw;
             }
 
-            mt-drawer > div.bottom {
+            mt-drawer.bottom > div {
                 bottom: 0;
                 left: 0;
                 width: 100vw;
@@ -54,6 +62,16 @@ class Drawer extends IgniteElement {
                 box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
             }
 
+            mt-drawer.left > .open-btn {
+                left: 1em;
+                bottom: 1em;
+            }
+
+            mt-drawer.right > .open-btn {
+                right: 1em;
+                bottom: 1em;
+            }
+
             mt-drawer > .open-btn {
                 position: absolute;
                 z-index: 999999;
@@ -63,8 +81,6 @@ class Drawer extends IgniteElement {
                 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;
@@ -73,6 +89,16 @@ class Drawer extends IgniteElement {
                 text-align: center;
             }
 
+            mt-drawer.left > div > .close-btn {
+                right: -3em;
+                top: 0.5em;
+            }
+
+            mt-drawer.right > div > .close-btn {
+                left: -3em;
+                top: 0.5em;
+            }
+
             mt-drawer > div > .close-btn {
                 position: absolute;
                 z-index: 999999;
@@ -82,8 +108,6 @@ class Drawer extends IgniteElement {
                 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;
@@ -134,6 +158,7 @@ class Drawer extends IgniteElement {
 
     render() {
         return this.template
+            .class(this.position)
             .child(
                 new button()
                     .class("open-btn")
@@ -143,7 +168,6 @@ class Drawer extends IgniteElement {
                 new div()
                     .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)