css(`
    nav-bar {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        z-index: 1;
        height: 100px;
    }
    
    .title-div {
        position: absolute;
        left: 2em;
        top: 2em;
        display: flex;
        align-items: center;
    }
    
    .links-div {
        position: absolute;
        right: 3em; 
        top: 2.75em; 
        display: flex;
    }
    
    .logo-p {
        font-size: 2em; 
        margin: 0 0 0 15px;
        letter-spacing: 1px;
        text-align: center;
    }
    
    .nav-hamburger {
        margin-right: 8vw;
        display: none;
        max-height:40px;
    }
    
    .nav-link {
        font-size: 1em; 
        margin: 0 0 0 15px;
        letter-spacing: 1px;
     }
    
    @media only screen and (max-width: 820px) {
        nav-bar a {
            text-decoration: none;
            color: var(--green);
        }
        
        .title-div {
            position: static
        }
        
        .logo {
            width: 10vw;
        }
        
        .logo-p {
            font-size: 8vw; 
            margin: 0 0 0 1vw;
        }
        
        .nav-hamburger {
            display: block;
        }
        
        .links-div {
            display:none;
        }
        
        .outer-nav {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 20vw;
            background: var(--tan);
            display: flex;
            z-index: 1;
            justify-content: space-between;
            align-items: center;
            padding: 0 3vw;
            max-height:80px;
        }
    }
`)

export default class NavBar extends HTMLElement {
    connectedCallback() {
        this.innerHTML += /* html */ `
            <div class="outer-nav">
                <div style="display: flex; align-items: center;">
                    <a draggable="false" href="/" id="homeLink" style="display: flex; align-items: center; text-decoration: none; color: var(--green);">
                        <div class="title-div">
                            <img class="logo" width="40" height="40" src="_/icons/logo.svg"/>
                            <p class="logo-p">Hyperia</p>
                        </div>
                    </a>
                   
                </div>
                
    
            <div class="links-div">
                <a draggable="false" href="/about" class="nav-link">About</a>
                <a draggable="false" href="/join" class="nav-link">Join</a>
                <a draggable="false" href="/login" class="nav-link">Login</a>
            </div>
                
                <!-- Right side: hamburger -->
                <img class="nav-hamburger" src="_/icons/hamburger.svg">
            </div>
        </div>
        `;

        // Track which anchor was pressed down
        let activeLink = null;

        // Get all anchor tags inside this element
        const anchors = this.querySelectorAll('a');

        anchors.forEach(anchor => {
            anchor.addEventListener('mousedown', (e) => {
                activeLink = anchor;
            });
        });

        // Listen globally for mouseup, to detect release anywhere
        document.addEventListener('mouseup', (e) => {
            if (activeLink) {
                // Navigate to the href of the activeLink
                window.location.href = activeLink.href;
                activeLink = null;
            }
        });

        const hamburger = this.querySelectorAll("img")[1]
        const sidebar = document.querySelector("side-bar");

        hamburger.addEventListener("click", () => {
            if (sidebar.style.right === "0vw") {
                sidebar.style.right = "-100vw";
            } else {
                sidebar.style.right = "0vw";
            }
        });
    }
}

customElements.define("nav-bar", NavBar)