|
|
|
@ -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 })
|
|
|
|
|
}
|
|
|
|
|