https://papabrickolini.dev/components/nav.js

1class Nav extends HTMLElement {
2    constructor() {
3        super();
4    }
5
6    connectedCallback() {
7        this.innerHTML = `
8            <nav>
9                <div class="row">
10                    <a href="/"><h7>Home</h7></a>
11                    <div class="row index">
12                        <a href="/#about"><h7>About Me</h7></a>
13                        <a href="/#projects"><h7>Projects</h7></a>
14                        <a href="/#gallery"><h7>Gallery</h7></a>
15                    </div>
16                    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
17                        <i class="fa fa-bars"></i>
18                    </a>
19                </div>
20            </nav>
21        `;
22
23        //this.refreshNav();
24    }
25
26    refreshNav() {
27        let currentURL = window.location.href;
28        this.querySelectorAll("nav a").forEach(p => {
29            if(currentURL.indexOf(p.getAttribute("href")) !== -1){
30                p.classList.add("current");
31            }
32        });
33    }
34}
35
36customElements.define('nav-component', Nav);