begin

ui/public/components/NavBar.js

@@ -0,0 +1,150 @@
+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)