A. Carpeta « js / custom »

Versión para imprimir.

1. js / custom / mi-nav.js

1
export class MiNav extends HTMLElement {
2
3
 constructor() {
4
  super()
5
  this.cargado = false
6
 }
7
8
 connectedCallback() {
9
10
  this.style.display = "block"
11
12
  if (this.cargado === false) {
13
   this.innerHTML = /* html */
14
    `<nav>
15
      <ul style="display: flex;
16
                 flex-wrap: wrap;
17
                 padding:0;
18
                 gap: 0.5em;
19
                 list-style-type: none">
20
       <li id="ocupado"><progress max="100">Cargando…</progress></li>
21
       <li id="aIndex" hidden><a href="index.html">Inicio</a></li>
22
       <li id="aAdmin" hidden>
23
        <a href="administrador.html">Para administradores</a>
24
       </li>
25
       <li id="aCliente" hidden><a href="cliente.html">Para clientes</a></li>
26
       <li id="san" hidden></li>
27
       <li id="aPerfil" hidden><a href="perfil.html">Perfil</a></li>
28
      </ul>
29
     </nav>`
30
31
   this.cargado = true
32
  }
33
 }
34
35
}
36
37
customElements.define("mi-nav", MiNav)