Added navbar

djthorpe · djthorpe · commit 0f8be74c7f89 · 2024-04-10T16:28:02.000+02:00
diff --git a/src/component/nav/NavBarElement.js b/src/component/nav/NavBarElement.js
@@ -0,0 +1,61 @@
+
+import { LitElement, html, css } from 'lit';
+import Event from '../../core/event';
+
+/**
+ * NavBarElement
+ */
+export class NavBarElement extends LitElement {
+    static get properties() {
+        return {
+            /**
+             * Name of the button to use when firing the EVENT_CLICK event
+             * @type {String}
+             */
+            name: { type: String },
+
+            /**
+             * Whether the button is disabled
+             * @type {Boolean}
+             */
+            disabled: { type: Boolean },
+        };
+    }
+
+    static get styles() {
+        return css`
+        :host nav {            
+            position: relative;
+            padding: var(--navbar-padding);
+            background-color: var(--navbar-background-color);
+            color: var(--navbar-color);
+            display: flex;
+            flex-flow: row wrap;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: var(--navbar-border-bottom);
+        }
+        `;
+    }
+
+    render() {
+        return html`
+            <nav><ul><slot></slot></ul></nav>
+        `;
+    }
+
+    constructor() {
+        super();
+        // Default properties
+        this.name = '';
+        this.disabled = false;
+    }
+
+    onClick() {
+        this.dispatchEvent(new CustomEvent(
+            Event.EVENT_CLICK, { detail: this.name },
+        ));
+    }
+}
+
+customElements.define('wc-navbar', NavBarElement);
diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,9 @@
     <link href="./index.css" rel="stylesheet">
 </head>
 <body>
+    <wc-navbar name="navbar"></wc-navbar>
+
+
     <div class="container">
         <h1>Button Group</h1>
         <wc-button-group>
@@ -32,5 +35,6 @@ <h1>Icon</h1>
     </div>
 
 
+
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,8 @@ import './component/button/ButtonElement';
 import './component/button/ButtonGroupElement';
 import './component/button/CloseButtonElement';
 import './component/icon/IconElement';
+import './component/nav/NavBarElement';
+
 
 // CSS
 import './css/core.css';
