james-yeahright0311/patchnotes-pulse-live

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        nav {7          background: white;8          padding: 1rem 2rem;9          display: flex;10          justify-content: space-between;11          align-items: center;12          box-shadow: 0 2px 4px rgba(0,0,0,0.05);13        }14        .logo {15          color: #3B82F6;16          font-weight: bold;17          font-size: 1.25rem;18          display: flex;19          align-items: center;20        }21        .logo-icon {22          margin-right: 0.5rem;23        }24        ul {25          display: flex;26          gap: 1.5rem;27          list-style: none;28          margin: 0;29          padding: 0;30        }31        a {32          color: #4B5563;33          text-decoration: none;34          font-weight: 500;35          transition: color 0.2s;36          display: flex;37          align-items: center;38        }39        a:hover {40          color: #3B82F6;41        }42        .nav-icon {43          margin-right: 0.5rem;44          width: 1rem;45          height: 1rem;46        }47        .active {48          color: #3B82F6;49        }50      </style>51      <nav>52        <a href="/" class="logo">53          <i data-feather="activity" class="logo-icon"></i>54          PatchNotes Pulse55        </a>56        <ul>57          <li><a href="/" class="active"><i data-feather="home" class="nav-icon"></i> Home</a></li>58          <li><a href="#"><i data-feather="bell" class="nav-icon"></i> Notifications</a></li>59          <li><a href="#"><i data-feather="settings" class="nav-icon"></i> Settings</a></li>60        </ul>61      </nav>62    `;63  }64}65customElements.define('custom-navbar', CustomNavbar);