vladgfch/doom-commit-explorer

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        nav {7          background-color: #0f172a;8          padding: 1rem 2rem;9          display: flex;10          justify-content: space-between;11          align-items: center;12          border-bottom: 1px solid #b81d1d;13        }14        .logo {15          color: #f8fafc;16          font-weight: bold;17          font-size: 1.25rem;18          font-family: 'Share Tech Mono', monospace;19          text-transform: uppercase;20        }21        .logo span {22          color: #b81d1d;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: #f8fafc;33          text-decoration: none;34          transition: color 0.2s;35          font-size: 0.9rem;36          display: flex;37          align-items: center;38          gap: 0.25rem;39        }40        a:hover {41          color: #b81d1d;42        }43        @media (max-width: 640px) {44          nav {45            flex-direction: column;46            gap: 1rem;47            padding: 1rem;48          }49          ul {50            width: 100%;51            justify-content: space-around;52          }53        }54      </style>55      <nav>56        <div class="logo">DOOM<span>COMMITS</span></div>57        <ul>58          <li><a href="/"><i data-feather="home"></i> Home</a></li>59          <li><a href="#"><i data-feather="git-commit"></i> Commits</a></li>60          <li><a href="#"><i data-feather="code"></i> Source</a></li>61          <li><a href="#"><i data-feather="info"></i> About</a></li>62        </ul>63      </nav>64    `;65  }66}67customElements.define('custom-navbar', CustomNavbar);