Add bottom app bar

2023-05-29 09:55:52 +02:00 · 2023-05-29 09:55:52 +02:00 · d9c0ff232e
commit d9c0ff232e
parent 4b0b053c83
3 changed files with 116 additions and 9 deletions
--- a/index.html
+++ b/index.html
@ -1,11 +1,22 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+  <meta charset="utf-8">
+  <link rel="icon" href="/static/images/home-icon.png">
+  <meta name="viewport" content="width=device-width">
+
+  <link rel="stylesheet" href="/src/css/index.css">
 </head>
+
 <body>

+
+  <footer>
+    <bottom-app-bar></bottom-app-bar>
+  </footer>
+
+  <script src="/src/components/bottom-app-bar.js" type="module"></script>
 </body>
+
 </html>
--- a/src/components/bottom-app-bar.js
+++ b/src/components/bottom-app-bar.js
@ -0,0 +1,77 @@
+const template = `
+  <div>
+    <img src="/static/images/home-icon.png">
+  </div>
+  <div>
+    <img src="/static/images/routes-icon.png">
+  </div>
+  <div>
+    <img src="/static/images/settings-icon.png">
+  </div>
+`;
+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 = `
+      <style>${style}</style>
+      ${template}
+    `;
+  }
+
+  /**
+   * Set all shadow dom selectors.
+   */
+  #setElements() {
+    this.selectors = {};
+  }
+
+  #addEventListeners() {}
+}
+
+customElements.define('bottom-app-bar', BottomAppBar);
+
+export default BottomAppBar;
+
--- a/src/css/index.css
+++ 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%;
+}