const dinamycContent = document.querySelector('#content');
    const preloader = document.querySelector('#preloader');
    document.addEventListener('DOMContentLoaded',ready);
    function ready() {
        document.addEventListener('click', onClick);
        function onClick(e) {
            e.preventDefault();
            elem = e.target;
            console.log(elem);
            var tmpActive = document.querySelector(".active");
            tmpActive.classList.remove('active');
            elem.classList.add('active');
            var tmpHrf = elem.getAttribute('href');
            if(tmpHrf !== null) {
                LoadPage(tmpHrf);
                
            }
            }
    }
    
    function LoadPage(tmpHrf) {
        console.log(tmpHrf);
        var xhr = new XMLHttpRequest();
        xhr.open('GET', tmpHrf);
        xhr.addEventListener('loadstart', onLoadStart);
        function onLoadStart() {
            preloader.classList.remove('hidden')
        }
        xhr.addEventListener('loadend', onLoadEnd);
        function onLoadEnd() {
            preloader.classList.add('hidden')
        }
        xhr.send();
        xhr.addEventListener('load', onLoad);
        function onLoad() {
            const htmlStructure = xhr.responseText;
            console.log(htmlStructure);
            dinamycContent.innerHTML = htmlStructure;
        }
    }
    
LoadPage('email-tab.html');