testes/html/padrao.js

const construtor_primario = document.getElementById('entrada_1');

construtor_primario.innerHTML =
    '<section class="menu">'
    +
    '<header class="cabecario_1">'
    +
    '<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
    +
    '<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
    +
    '</header>'
    +
    '</section>'
    +
    '<main class="matriz">'
    +
    '<section class="capitulo_1">'
    +
    '<div class="Corpo_1">'
    +
    '<div class="Colunas_1">'
    +
    '<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
    +
    '<div class="seguimentos_2">'
    +
    '<div class="user_1">'
    +
    '<img src="../Acessts/Imagens/Iconis/profile-user.png" alt="" class="icon_subcab2_2">'
    +
    '<img src="../Acessts/Imagens/Iconis/profile-user.png" alt="" class="icon_subcab2_1">'
    +
    '</div>'
    +
    '<div class="user_2"><p> <div id="User">Usuario</div><div id="Empresa">Empresa</div></p></div>'
    +
    '</div>'
    +
    '</div>'
    +
    '<div class="Colunas_2">'
    +
    '<div class="seguimentos_1"></div>'
    +
    '<div class="seguimentos_2"><div class="sessao_1"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/Ambiente_Usuario_copy.html" target="frame">'
    +
    '<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
    +
    '<section class="forg">'
    +
    '<div class="item_menu" id="testes"><img src="../Acessts/Imagens/Iconis/monitor.png" alt=""><p>Monitoramento</p></div>'
    +
    '<div id="sub_entrada"></div>'
    +
    '</section>'
    +
    '<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
    +
    '</div>'
    +
    '<div class="sessao_2">'
    +
    '<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
    +
    '<a href="./Tela_config/Config_Ambiente_usuario.html" target="frame"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
    +
    ' </div>'
    +
    '</section>'
    +
    '<section class="capitulo_2">'
    +
    '<div class="Corpo_2">'
    +
    '<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "http://grafana.itguys.com.br:3000/dashboard/snapshot/6sVz7BNJVCY4sZD0m9P40k7nFEc5MqLI?kiosk"frameborder = "0" ></iframe ></div>'
    +
    '</div>'
    +
    '</main>';


const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada');

construtor_Secundarios_Monitoramento.innerHTML =
    '<div class="sub_menu" id="sub_menu">'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Itguys.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>iTGuys</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Freguesia</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Infantil.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Infantil</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Sao_Fabiano.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>São Fabiano</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Itaguaí</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Recreio</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/vpn.png" alt=""><p>Client Vpn</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Ferreira_Real.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Ferreira Real</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Oeste_Pan.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Oeste Pan</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_IBAP.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IBAP</p></div></a>'
    +
    '<a href="./Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IVVCG</p></div></a>'
    +
    '</div>';




document.getElementById('testes').addEventListener('mouseenter', function () {
    document.getElementById('sub_menu').classList.add('show');
});

document.getElementById('testes').addEventListener('mouseleave', function () {
    document.getElementById('sub_menu').classList.remove('show');
});

document.getElementById('sub_menu').addEventListener('mouseenter', function () {
    this.classList.add('show');
});

document.getElementById('sub_menu').addEventListener('mouseleave', function () {
    this.classList.remove('show');
});


var botao = document.querySelector('#menu')
var cabecario = document.querySelector('.cabecario_1')
var tela = document.querySelector('.transmissão')
var menu = document.querySelector('.capitulo_1')
var temas = document.querySelectorAll('.item_menu')


botao.addEventListener('click', function () {
    menu.classList.toggle('expansao');
    cabecario.classList.toggle('expansao');
    tela.classList.toggle('expansao');

});

function selectLink() {
    temas.forEach((item) =>
        item.classList.remove('ativo')
    )
    this.classList.add('ativo')
}
temas.forEach((item) =>
    item.addEventListener('click', selectLink))