https://streettreasurehunter.netlify.app/components/navbar.js

1class CustomNavbar extends HTMLElement {
2  connectedCallback() {
3    // Use Light DOM by writing directly to innerHTML (no attachShadow)
4    this.innerHTML = `
5      <style>
6        .navbar {
7          background: linear-gradient(135deg, #CFC8F9 0%, #9FA6D8 100%);
8          color: #2E2E38;
9        }
10        .nav-link {
11          transition: all 0.3s ease;
12          font-family: 'Source Sans 3', sans-serif;
13          font-weight: 500;
14          font-size: 1.1rem;
15          color: #F87342;
16        }
17        .nav-title {
18            font-family: 'Playfair Display', serif;
19            font-weight: 700;
20            font-size: 3.5rem;
21            color: #2E2E38;
22            text-decoration: none;
23            line-height: 1.1;
24        }
25        .nav-link:hover {
26          color: #F87342;
27        }
28        /* Default hidden */
29        #auth-section {
30            display: none;
31        }
32        /* Show if host has attribute (Global CSS since Light DOM) */
33        custom-navbar[show-auth="true"] #auth-section {
34            display: flex !important;
35        }
36      </style>
37      <nav class="navbar shadow-lg">
38        <div class="container mx-auto px-12 py-8">
39          <div class="flex flex-col items-start gap-4">
40            <div class="flex items-center space-x-3">
41              <i data-feather="map-pin" class="w-10 h-10 text-[#F87342]"></i>
42              <a href="index.html" class="nav-title">Street Treasure Hunter</a>
43            </div>
44            <div class="flex items-center space-x-6">
45              <div id="auth-section" class="flex items-center space-x-4">
46                <button id="login-btn" class="text-sm font-medium hover:text-[#F87342] transition-colors">Sign In</button>
47              </div>
48              <a href="about.html" class="nav-link flex items-center space-x-1">
49                <i data-feather="info" class="w-4 h-4"></i>
50                <span>About</span>
51              </a>
52            </div>
53          </div>
54        </div>
55      </nav>
56    `;
57
58    // Bind methods
59    this.updateAuthUI = this.updateAuthUI.bind(this);
60
61    // Add event listener
62    const btn = this.querySelector('#login-btn');
63    if (btn) {
64      btn.addEventListener('click', () => {
65        this.dispatchEvent(new CustomEvent('auth-click', {
66          bubbles: true,
67          composed: true
68        }));
69      });
70    }
71
72    // Initialize icons using global feather
73    if (window.feather) {
74      window.feather.replace(null, this);
75    }
76  }
77
78  updateAuthUI(user) {
79    const btn = this.querySelector('#login-btn');
80    if (btn) {
81      btn.textContent = user ? 'Sign Out' : 'Sign In';
82    }
83  }
84}
85
86customElements.define('custom-navbar', CustomNavbar);