Aside

HTML

<x-aside width='400px'>
    <div id="aside-title">Title</div>
    <div id="aside-content">
        ...
        ...
        ...
    </div>
    <div id="aside-buttons">
        <button id="ok" class="btn btn-large aside-ok">OK</button>
        <button id="alternate" class="btn btn-large aside-alternate">Apply</button>
        <button id="cancel" class="btn btn-large aside-cancel">Cancel</button>
    </div>
</x-aside>

JavaScript

document.querySelector('#asideBtn').addEventListener('click', () => {
    let aside = document.querySelector('x-aside');
    aside.dispatchEvent(new CustomEvent('open'));
            
    aside.okAction = () => {
        showSnackbar('OK Button Pressed');
        let aside = document.querySelector('x-aside');
        aside.dispatchEvent(new CustomEvent('close'));
    };
    aside.cancelAction = () => {
        showSnackbar('Cancel Button Pressed');
        let aside = document.querySelector('x-aside');
        aside.dispatchEvent(new CustomEvent('close'));                
    };
    aside.alternateAction = () => {
        showSnackbar('Apply Button Pressed');
    };
});
Title