37 lines
2.2 KiB
JavaScript
37 lines
2.2 KiB
JavaScript
|
import { Component, Hash, Util } from '@web/state'
|
||
|
|
|
||
|
|
Component.register('Nav', container => {
|
||
|
|
container.click = (item, noselect) => {
|
||
|
|
if (!item.noselect && !noselect) Hash.nav = item.name
|
||
|
|
container.dispatchEvent(new CustomEvent('nav', { detail: { item }, bubbles: false }))
|
||
|
|
}
|
||
|
|
}, Util.makeDom(/*html*/`
|
||
|
|
<div class="navbar navbar-expand bg-body-secondary px-3 pb-0 border-bottom align-items-center">
|
||
|
|
<img $if="this.state.brand.image" $src="this.state.brand.image" class="me-2" style="height:30px;width:auto;max-width:300px">
|
||
|
|
<i $if="this.state.brand.icon" $class="bi bi-\${this.state.brand.icon} me-2"></i>
|
||
|
|
<span $if="this.state.brand.label" class="me-2" $text="this.state.brand.label"></span>
|
||
|
|
<div class="ms-2"></div>
|
||
|
|
<div $each="this.state.list" $class="navbar-nav text-truncate \${item.type==='fill'?'flex-fill':''}">
|
||
|
|
<button $if="item.type==='button'" $class="nav-link \${Hash.nav===item.name?'active':''}" $onclick="this.click(item)">
|
||
|
|
<i $class="bi bi-\${item.icon} me-2"></i><span $class="d-none d-\${this.state.list.length>5?'lg':'md'}-inline" $text="item.label"></span>
|
||
|
|
</button>
|
||
|
|
<div $if="item.type==='dropdown'" class="dropdown">
|
||
|
|
<button $class="nav-link \${Hash.nav===item.name?'active':''}" data-bs-toggle="dropdown">
|
||
|
|
<i $class="bi bi-\${item.icon} me-2"></i><span $class="d-none d-\${this.state.list.length>5?'lg':'md'}-inline" $text="item.label"></span>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu dropdown-menu-end p-3 bg-body-secondary shadow" $style="width: \${item.width || 250}px;">
|
||
|
|
<template $each="item.list" as="subitem">
|
||
|
|
<button $if="subitem.type==='button'" class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">
|
||
|
|
<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>
|
||
|
|
</button>
|
||
|
|
<div $if="subitem.type==='switch'" class="d-flex align-items-center">
|
||
|
|
<i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>
|
||
|
|
<div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`))
|