const _DOM = ({
isMobile,
backgroundUrl,
labelText = 'No Label',
subLabelText = '',
quickNavDOM,
tabsDOM,
}) =>
div({style: style(backgroundUrl), class: {title: true}},[
quickNavDOM,
div({style: {padding: '0.5em', lineHeight: '48px'}},[
isMobile && Appbar.Button({className: 'nav-button'}, [icon('menu')]),
div({style: {lineHeight: '24px'}},[
div({style: {fontSize: '18px', fontWeight: 'bold'}},[labelText]),
div({style: {fontSize: '14px'}},[subLabelText]),
]),
]),
isMobile ? tabsDOM : null,
])
div('.content', [
top,
div('.bottom', [
left && div('.left', [left]),
div('.main', [
div('.title',title),
subtitle && div('.subtitle',subtitle),
]),
right && div('.right', [right]),
]),
])
),
})
const sidenavButton =
Appbar.Button({className: 'nav-button'}, [icon('menu')])
const ResponsiveTitle = sources => {
const rightDOM$ = just(sidenavButton)
const content = TitleContent({...sources,
rightDOM$: sources.isMobile$
.flatMapLatest(m => m && rightDOM$ || just(null)),
// subtitleDOM$: sources.isMobile$
// .flatMapLatest(m => m && sources.subtitleDOM$ || just(null)),
})
const url$ = sources.backgroundUrl$ || just(null)
const classes$ = sources.classes$ || just([])
return {
DOM: combineLatest(