firasx/algorithm-playground

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        nav {7          background: rgba(126, 34, 206, 0.9);8          padding: 1rem 2rem;9          display: flex;10          justify-content: space-between;11          align-items: center;12          position: relative;13          z-index: 50;14          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);15        }16.logo {17          color: white;18          font-weight: bold;19          font-size: 1.5rem;20          display: flex;21          align-items: center;22          gap: 0.5rem;23        }24        .logo span {25          background: linear-gradient(90deg, #8b5cf6, #ec4899);26          -webkit-background-clip: text;27          background-clip: text;28          color: transparent;29        }30        ul {31          display: flex;32          gap: 1.5rem;33          list-style: none;34          margin: 0;35          padding: 0;36        }37        a {38          color: rgba(255, 255, 255, 0.8);39          text-decoration: none;40          transition: color 0.2s;41          font-weight: 500;42          display: flex;43          align-items: center;44          gap: 0.25rem;45        }46        a:hover {47          color: white;48        }49        .nav-buttons {50          display: flex;51          gap: 1rem;52        }53        .github-btn {54          background: rgba(255, 255, 255, 0.1);55          padding: 0.5rem 1rem;56          border-radius: 6px;57          display: flex;58          align-items: center;59          gap: 0.5rem;60          transition: all 0.2s;61        }62        .github-btn:hover {63          background: rgba(255, 255, 255, 0.2);64        }65        @media (max-width: 768px) {66          nav {67            flex-direction: column;68            gap: 1rem;69            padding: 1rem;70          }71          ul {72            flex-wrap: wrap;73            justify-content: center;74          }75        }76      </style>77      <nav>78        <a href="/" class="logo">79          <i data-feather="cpu"></i>80          <span>Algorithm Playground</span>81        </a>82        <ul>83          <li><a href="/sorting.html"><i data-feather="filter"></i> Sorting</a></li>84          <li><a href="/searching.html"><i data-feather="search"></i> Searching</a></li>85          <li><a href="/graphs.html"><i data-feather="git-graph"></i> Graphs</a></li>86          <li><a href="/pathfinding.html"><i data-feather="map"></i> Pathfinding</a></li>87        </ul>88        <div class="nav-buttons">89          <a href="https://github.com/yourusername/algorithm-playground" target="_blank" class="github-btn">90            <i data-feather="github"></i>91            GitHub92          </a>93        </div>94      </nav>95    `;96  }97}98customElements.define('custom-navbar', CustomNavbar);