<dialog id="dlgtopbar" class="hoo-dlg topbar">
    {{> molecules-dialog-header }}
    {{#> molecules-dialog-content }}
    <p>This dialog is a topbar . That automatically scales with the content.</p>
    <p>To make the width fixed add the CSS variable <code>--hoo-dlg-height</code></p>
    <h2>Try to resize the sidebar</h2>
    {{> molecules-helper-dlg-resize-hor }}
    {{/molecules-dialog-content }}
</dialog>
<!--- ⬇️ Script below is just for demo purposes ⬇️ -->
<script>
    let dlg = document.querySelector('#dlgtopbar');

    // Hide background
    if (dlg !== undefined && dlg.parentElement.className === 'dlg-background') {

        dlg ? dlg.showModal() : dlg;
        
        const resize = (event) => {

            console.debug(event.currentTarget.id);

            let newSize = null;

            switch (event.currentTarget.id) {
                case 'height-unset':
                    break;
                case 'height-20vw':
                    newSize = '20vh';
                    break;
                case 'height-50vw':
                    newSize = '50vh';
                    break;
                case 'height-75vw':
                    newSize = '75vh';
                    break;
                default:
                    break;
            }

            console.debug(dlg, newSize);

            if (dlg && newSize) {

                console.debug(' --- Update ....')
                dlg.style.setProperty('--hoo-dlg-height', newSize);

            } else {
                if (newSize === null) {
                    dlg.style.setProperty('--hoo-dlg-height', null);
                }
            }
        }

        let resizers = document.querySelectorAll("button[id^='height']");

        console.debug(resizers);

        resizers.forEach(resizer => resizer.addEventListener('click', resize));
    }

</script>