///// !!! index.php !!! /////

// Get tab links and tab panes
let tabLinks = document.querySelectorAll('#main-sidebar a');
let tabPanes = document.querySelectorAll('.main-content-box');



// Add event listener to all tab links
tabLinks.forEach(tabLink => {
	tabLink.addEventListener('click', tabChange);
});



// Add selected link style and remove those who were not selected
function tabChange(e) {

    e.preventDefault();
    
    // Change the style of the links
    tabLinks.forEach(tabLink => {
    	if(tabLink === e.target) {
    		tabLink.classList.add('active');
    	} else {
    		tabLink.classList.remove('active');
    	}
    });

    // Change the opacity of each of the panes
    tabPanes.forEach(tabPane => {
    	if(tabPane.id === e.target.hash.substring(1)) {
			tabPane.classList.add('show');
    	} else {
			tabPane.classList.remove('show');
    	}
    });

}