From 1483ee54f0c51c00b4ba3bff5a49818c2d35be6f Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 2 Dec 2020 12:58:45 -0800
Subject: [PATCH] Fixed dropdown menu styling. Added alignment property with
 support for centering the dropdown menu. Cleaned up the code a little too and
 simplified a few things.

---
 dropdown-menu.js | 46 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/dropdown-menu.js b/dropdown-menu.js
index 94cbade..a16e85e 100644
--- a/dropdown-menu.js
+++ b/dropdown-menu.js
@@ -1,5 +1,5 @@
 import { IgniteElement } from "../ignite-html/ignite-element.js";
-import { IgniteTemplate, button, ul, slot } from "../ignite-html/ignite-template.js";
+import { IgniteTemplate, button, ul, slot, div } from "../ignite-html/ignite-template.js";
 
 class DropdownMenu extends IgniteElement {
     constructor() {
@@ -9,31 +9,49 @@ class DropdownMenu extends IgniteElement {
     get properties() {
         return {
             button: null,
-            buttonClass: "btn btn-simple",
+            buttonClass: "btn",
             placement: "right",
-            minWidth: null
+            alignment: "none",
+            minWidth: null,
+            marginTop: null,
         };
     }
 
     get styles() {
         return `
-            .btn-simple {
-                border: none;
-                background-color: transparent;
+            bt-dropdown-menu {
+                position: relative;
+            }
+
+            bt-dropdown-menu > div {
+                position: relative;
+            }
+
+            bt-dropdown-menu > div.alignment-center {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            bt-dropdown-menu > div.alignment-center > ul {
+                left: unset !important;
             }
         `;
     }
 
     render() {
         return this.template.child(
-            new button().class(this.buttonClass).data("toggle", "dropdown").child(this.button),
-            new ul()
-                .class("dropdown-menu")
-                .class(this.placement, (value) => { return `dropdown-menu-${value}`; })
-                .style("min-width", this.minWidth, "important", (value) => { return value ? value : "unset"; })
-                .child(
-                    new slot(this)
-                )
+            new div().class(this.alignment, value => "alignment-" + value).child(
+                new button().class(this.buttonClass).data("toggle", "dropdown").child(this.button),
+                new ul()
+                    .class("dropdown-menu")
+                    .class(this.placement, value => `dropdown-menu-${value}`)
+                    .style("min-width", this.minWidth, "important", value => value ? value : "unset")
+                    .style("margin-top", this.marginTop)
+                    .child(
+                        new slot(this)
+                    )
+            )
         );
     }
 }