How can I used the panel manager to properly add a new settings tab?

[giltee]

I am trying to add a custom "manager" like the traits and styles that are built in to handle settings that are internal to our legacy application.

I have been successful in adding a new button to the right hand panel, using the following code snip:

this.editor.Panels.addButton('views',{
			id: 'articleSettings',
			className: 'gjs-pn-btn fa fa-cogs mchn-article-settings',
			command: 'someCommand',
			attributes: { title: 'Article Settings'},
			active: false,
		});

This does add the button to the UI and closes the other drawers when I click on it but I can't seem to find an element that connects to the button click that would show the content I want to add.

Below is screen shot of what I want to have happen. Is there any command or feature that would allow me to link additional settings that would allow me to do this using grapesjs or do I need to write my own custom?

[giltee]

Well since not a single soul responded I just wrote my own. If anyone wants to do the same thing in the future for the newsletter plugin, code is below. I am not saying this is the 'correct way' to do it (as no one answered me) but it's a way.

articleSettings(){

		let container = document.createElement('div');
		container.id = 'mchn-article-settings-container';
		container.classList.add('mchn-display-none');
		
		const header = `<div class="gjs-traits-label">Article settings</div>`;
		const settings = [
			{ id: 'adds', label: 'Advertisements'},
			{ id: 'showAuthor', label: 'Show Author'},
			{ id: 'BreadsCrumbsdds', label: 'Breads Crumbs'},
			{ id: 'comments', label: 'Comments'},
			{ id: 'Intent', label: 'Exit Intent'},
			{ id: 'Publically', label: 'Publically Listed'},
			{ id: 'Searchable', label: 'Searchable'},
			{ id: 'Sidebar', label: 'Sidebar'},
			{ id: 'Footer', label: 'Site Footer'},
			{ id: 'Header', label: 'Site Header'},
			{ id: 'Nav', label: 'Site Nav'},
			{ id: 'Buttons', label: 'Social Buttons'},
			{ id: 'Title', label: 'Title'},
			{ id: 'Mat', label: 'Welcome Mat'},
		];

		let ul = document.createElement('ul');
		ul.style.listStyle = 'none';
		ul.style.paddingLeft = '5px';
		ul.style.textAlign = 'left';

		for(const setting of settings){
			
			let elSwitch = MDCSwitch.htmlBasic(setting);

			let li = document.createElement('li');
			li.innerHTML = elSwitch;

			ul.appendChild(li);
		}

		container.innerHTML= header;
		container.appendChild(ul);

		return container;

	}

// on editor load

this.editor.on('load', (model) => { 

			/* Settings Container List */
			let settingsConatiner = document.querySelector('.gjs-pn-panel.gjs-pn-views-container.gjs-one-bg.gjs-two-color');
			let settingsList = this.articleSettings();
			settingsConatiner.appendChild(settingsList);

			document.querySelectorAll('.mdc-switch').forEach( el => new MDCSwitch(el));

			document
			.querySelector('.gjs-pn-views')
			.querySelectorAll('span')
			.forEach(el => {

				el.addEventListener('click', () => {
					if(el.getAttribute('title') == 'Article Settings'){
						settingsList.classList.remove('mchn-display-none');
					} else {
						settingsList.classList.add('mchn-display-none');
					}
				})

			})
			

		});
    }