document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(e) {
        // Check if the target has the specific class
        if (e.target.matches('.side-drawer-init, .side-drawer-link')) {
            e.preventDefault();
            var url = e.target.getAttribute('data-url');
            if (url) {
                var title = e.target.getAttribute('data-title');
                var description = e.target.getAttribute('data-description') || title;
                var drawer = new SideDrawer(title, description); // Assuming SideDrawer is a global or previously defined function/object
                var selectorData = e.target.getAttribute('data-contentSelector');
                if (e.target.getAttribute('data-side-drawer-width')) {
                    drawer.SetWidth(e.target.getAttribute('data-side-drawer-width'));
                }
                drawer.Show();
                fetch(url)
                    .then(response => response.text())
                    .then(data => {
                        var drawerContent = document.createElement('div');
                        if (selectorData === null) {
                            drawerContent.innerHTML = data;
                        } else {
                            var parser = new DOMParser();
                            var doc = parser.parseFromString(data, "text/html");
                            var selectedContent = doc.querySelector(selectorData);
                            if (selectedContent) {
                                drawerContent.innerHTML = selectedContent.innerHTML;
                            }
                        }
                        drawer.TransferContent(drawerContent);
                    });
            }
        }
    }, true); // Using true for capture since .delegate() listens in the capturing phase
});