yahyaamara11/integer-explorer

1class CustomNavbar extends HTMLElement {2  connectedCallback() {3    this.attachShadow({ mode: 'open' });4    this.shadowRoot.innerHTML = `5      <style>6        .navbar {7          background-color: white;8          box-shadow: 0 2px 4px rgba(0,0,0,0.1);9        }10        .nav-link {11          transition: all 0.3s ease;12          position: relative;13        }14        .nav-link:hover {15          color: #6366f1;16        }17        .nav-link::after {18          content: '';19          position: absolute;20          bottom: -2px;21          left: 0;22          width: 0;23          height: 2px;24          background-color: #6366f1;25          transition: width 0.3s ease;26        }27        .nav-link:hover::after {28          width: 100%;29        }30        .mobile-menu {31          max-height: 0;32          overflow: hidden;33          transition: max-height 0.3s ease-out;34        }35        .mobile-menu.open {36          max-height: 500px;37        }38      </style>39      <nav class="navbar py-4 px-6">40        <div class="container mx-auto flex justify-between items-center">41          <a href="index.html" class="flex items-center">42            <i data-feather="compass" class="text-indigo-600 mr-2"></i>43            <span class="text-xl font-bold text-indigo-700">Integer Explorer</span>44          </a>45          46          <div class="hidden md:flex space-x-8">47            <a href="index.html" class="nav-link text-gray-700 font-medium">Home</a>48            <a href="lessons.html" class="nav-link text-gray-700 font-medium">Lessons</a>49            <a href="practice.html" class="nav-link text-gray-700 font-medium">Practice</a>50            <a href="games.html" class="nav-link text-gray-700 font-medium">Games</a>51            <a href="about.html" class="nav-link text-gray-700 font-medium">About</a>52          </div>53          54          <button id="mobile-menu-button" class="md:hidden text-gray-700">55            <i data-feather="menu"></i>56          </button>57        </div>58        59        <div id="mobile-menu" class="mobile-menu md:hidden px-6">60          <div class="flex flex-col space-y-4 py-4">61            <a href="index.html" class="text-gray-700 font-medium">Home</a>62            <a href="lessons.html" class="text-gray-700 font-medium">Lessons</a>63            <a href="practice.html" class="text-gray-700 font-medium">Practice</a>64            <a href="games.html" class="text-gray-700 font-medium">Games</a>65            <a href="about.html" class="text-gray-700 font-medium">About</a>66          </div>67        </div>68      </nav>69    `;70 71    // Mobile menu toggle72    const menuButton = this.shadowRoot.getElementById('mobile-menu-button');73    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');74 75    menuButton.addEventListener('click', () => {76      mobileMenu.classList.toggle('open');77      const icon = menuButton.querySelector('i');78      if (mobileMenu.classList.contains('open')) {79        icon.setAttribute('data-feather', 'x');80      } else {81        icon.setAttribute('data-feather', 'menu');82      }83      feather.replace();84    });85  }86}87 88customElements.define('custom-navbar', CustomNavbar);