components/navbar.js

class CustomNavbar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const menuButton = this.shadowRoot.getElementById('mobile-menu-button');
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
        
        menuButton.addEventListener('click', () => {
          mobileMenu.classList.toggle('open');
        });
      });
    </script>
<style>
        :host {
          display: block;
        }
        .navbar {
          transition: all 0.3s ease;
          background-color: white;
        }
        .navbar.scrolled {
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .mobile-menu {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease-out;
          background-color: white;
          width: 100%;
          position: absolute;
          left: 0;
          top: 100%;
        }
        .mobile-menu.open {
          max-height: 500px;
          display: block;
        }
@media (min-width: 768px) {
          .mobile-menu {
            max-height: none !important;
            background-color: transparent;
            position: static;
            width: auto;
            display: flex;
            flex-direction: row;
            gap: 2rem;
          }
        }
      </style>
<nav class="navbar fixed w-full z-50 py-4 px-6 bg-white md:bg-transparent">
        <div class="container mx-auto flex justify-between items-center">
          <a href="/" class="text-2xl font-bold text-primary" style="z-index: 100;">TOPTERA</a>
<!-- Mobile menu button -->
          <button id="mobile-menu-button" class="md:hidden focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="3" y1="12" x2="21" y2="12"></line>
              <line x1="3" y1="6" x2="21" y2="6"></line>
              <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
</button>
          
          <!-- Desktop menu -->
          <div class="hidden md:flex space-x-8">
            <a href="#problem" class="text-zinc-700 hover:text-primary transition duration-300">Проблемы</a>
            <a href="#process" class="text-zinc-700 hover:text-primary transition duration-300">Процесс</a>
            <a href="#cases" class="text-zinc-700 hover:text-primary transition duration-300">Кейсы</a>
            <a href="/seo-spetsialist-seo-optimizator.html" class="text-zinc-700 hover:text-primary transition duration-300">Вакансии</a>
</div>
          <!-- Mobile menu -->
          <div id="mobile-menu" class="mobile-menu md:hidden shadow-lg">
<div class="container mx-auto px-6 py-4 flex flex-col space-y-4">
              <a href="#problem" class="text-zinc-700 hover:text-primary transition duration-300 py-2">Проблемы</a>
              <a href="#process" class="text-zinc-700 hover:text-primary transition duration-300 py-2">Процесс</a>
              <a href="#cases" class="text-zinc-700 hover:text-primary transition duration-300 py-2">Кейсы</a>
              <a href="/seo-spetsialist-seo-optimizator.html" class="text-zinc-700 hover:text-primary transition duration-300 py-2">Вакансии</a>
</div>
          </div>
        </div>
      </nav>
    `;
  }
}