Make nav bar accept ex-nav-item children

src/nav/NavBar.component.ts

@@ -51,18 +51,26 @@ export class NavBarComponent extends ExComponent {
                 color: var(--color-accent-text);
             }
 
-            span.appName {
+            span {
                 font-size: 1.2em;
                 font-weight: bold;
                 padding: 14px;
                 padding-right: 30px;
                 padding-left: 0;
             }
+
+            .items-container {
+                display: none;
+            }
         </style>
         <nav>
+            <slot name="branding"></slot>
             <span class="appName"></span>
             <ul></ul>
         </nav>
+        <div class="items-container">
+            <slot></slot>
+        </div>
     `
 
     @Renders()
@@ -84,7 +92,7 @@ export class NavBarComponent extends ExComponent {
         this.appNameEl.innerText = this.appName || ''
 
         this.list.childNodes.forEach(x => x.remove())
-        for ( const item of this.items ) {
+        for ( const item of this.getItems() ) {
             const li = document.createElement('li')
             const a = document.createElement('a')
             li.appendChild(a)
@@ -101,6 +109,32 @@ export class NavBarComponent extends ExComponent {
         }
     }
 
+    getItems(): NavBarItem[] {
+        const itemEls = this.querySelectorAll('ex-nav-item').values()
+        const items = []
+
+        for ( const itemEl of itemEls ) {
+            const title = itemEl.getAttribute('title')
+            const name = itemEl.getAttribute('name')
+            if ( title && name ) {
+                const item: NavBarItem = {
+                    title,
+                    name,
+                    right: itemEl.hasAttribute('right'),
+                }
+
+                const href = itemEl.getAttribute('href')
+                if ( href ) {
+                    item.href = href
+                }
+
+                items.push(item)
+            }
+        }
+
+        return items
+    }
+
     dispatchItemClick(name: string) {
         return this.dispatchCustom('onItemClick', { name })
     }