https://dsai-coep.netlify.app/templates/navbar.js

1class Header extends HTMLElement {
2    constructor() {
3      super();
4    }
5  
6    connectedCallback() {
7      this.innerHTML = `
8      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
9      <div class="container-fluid">
10        <a class="navbar-brand" href="#"><img class="navbar-img" src="./logos/CoEP.jpeg"></img><img class="navbar-img" src="./logos/DSAI.jpeg"></img></a>
11        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
12          <span class="navbar-toggler-icon"></span>
13        </button>
14        <div class="collapse navbar-collapse" id="navbarSupportedContent">
15          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
16            <li class="nav-item active" id="home">
17              <a class="nav-link" aria-current="page" href="#">Home</a>
18            </li>
19            <li class="nav-item" id="team"> 
20              <a class="nav-link" href="team2.html">Team</a>
21            </li>
22            <li class="nav-item" id="events">
23               <a class="nav-link" href="events2021.html">Events</a>
24             </li>
25             <li class="nav-item" id="work">
26               <a class="nav-link" href="work.html">Work</a>
27             </li>
28             <li class="nav-item" id="photo-gallery">
29               <a class="nav-link" href="photoGallery2.html">Photo Gallery</a>
30             </li>
31          </ul>
32        </div>
33      </div>
34    </nav>
35    <script>
36
37      `;
38    }
39  }
40
41customElements.define('header-comp', Header);
42