From d9c0ff232e9bd3d278825ad47ffaad770b3ee4cb Mon Sep 17 00:00:00 2001 From: Federico Bologni Date: Mon, 29 May 2023 09:55:52 +0200 Subject: [PATCH] Add bottom app bar --- index.html | 29 ++++++++---- src/components/bottom-app-bar.js | 77 ++++++++++++++++++++++++++++++++ src/css/index.css | 19 ++++++++ 3 files changed, 116 insertions(+), 9 deletions(-) create mode 100644 src/components/bottom-app-bar.js create mode 100644 src/css/index.css diff --git a/index.html b/index.html index b80f96e..1187dd4 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,22 @@ - - - - - - - - - + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/bottom-app-bar.js b/src/components/bottom-app-bar.js new file mode 100644 index 0000000..82ad3e2 --- /dev/null +++ b/src/components/bottom-app-bar.js @@ -0,0 +1,77 @@ +const template = ` +
+ +
+
+ +
+
+ +
+`; +const style = ` + :host { + position: fixed; + bottom: 20px; + display: flex; + height: 42px; + width: 80%; + border-radius: 90px; + box-shadow: 0 0 50px #ccc; + } + + :host > div { + flex: 1; + display: grid; + place-items: center; + } + + img { + display: block; + height: 32px; + width: auto; + } +`; + +/** + * Bottom app bar custom element. + */ +class BottomAppBar extends HTMLElement { + #elements = {}; + + /** + * @constructor + */ + constructor() { + super(); + + this.#createShadowDOM(); + this.#setElements(); + this.#addEventListeners(); + } + + /** + * Create shadow DOM. + */ + #createShadowDOM() { + this.attachShadow({mode: 'open'}); + this.shadowRoot.innerHTML = ` + + ${template} + `; + } + + /** + * Set all shadow dom selectors. + */ + #setElements() { + this.selectors = {}; + } + + #addEventListeners() {} +} + +customElements.define('bottom-app-bar', BottomAppBar); + +export default BottomAppBar; + diff --git a/src/css/index.css b/src/css/index.css new file mode 100644 index 0000000..dd8a9d2 --- /dev/null +++ b/src/css/index.css @@ -0,0 +1,19 @@ + +* { + box-sizing: border-box; +} + +body { + width: 100%; + height: 100%; + margin: 0px; + background-color: #fff; +} + +footer { + position: fixed; + bottom: 0; + display: grid; + place-items: center; + width: 100%; +}