File: assets/js/router/navbar.js

import Component from '../component/Component.js';

class Navbar extends Component {
    constructor() {
        super();
        this.navOpen = false;
    }

    openNav() {
        this.navOpen = !this.navOpen; 
        if(this.navOpen){
            document.getElementById("myNav").style.height = "100%";
            document.getElementById("hamburg").innerText = "X";
        } else {
            document.getElementById("myNav").style.height = "0%";
            document.getElementById("hamburg").innerText = "?";
        }
    }
    render() {
        return `
            <div id="myNav" class="overlay">
                <div class="overlay-content">
                    <a href="/">Home</a>
                    <a href="/about">Sobre</a>
                    <a href="/contact">Contato</a>
                </div>
            </div>
            <div class="w3-bottom w3-black" style="z-index:99;">
                <button class="w3-bar w3-xlarge w3-black w3-display-bottommiddle" id="hamburg" style="cursor: pointer;">?</button>
            </div>
            <div class="w3-container w3-black" hidden>
                <div class="w3-bar w3-black ">
                    <a href="/" class="w3-bar-item w3-button"><i class="fa fa-home"></i> Home</a>
                    <a href="/about" class="w3-bar-item w3-button"><i class="fa fa-search"></i> Sobre</a>
                    <a href="/contact" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i> Contato</a>
                </div>
            </div>
        `;
    }

    afterRender() {
        const hamburgButton = document.getElementById("hamburg");
        hamburgButton.addEventListener('click', () => this.openNav());
    }
}

export default Navbar;