Не отображется меню

components/navbar.js

@@ -2,7 +2,17 @@ class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
-      <style>
+    <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;
         }
@@ -18,11 +28,16 @@ class CustomNavbar extends HTMLElement {
           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) {
+@media (min-width: 768px) {
           .mobile-menu {
             max-height: none !important;
             background-color: transparent;
@@ -39,8 +54,12 @@ class CustomNavbar extends HTMLElement {
           <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">
-            <i data-feather="menu"></i>
-          </button>
+            <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">
@@ -49,10 +68,9 @@ class CustomNavbar extends HTMLElement {
             <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 w-full absolute left-0 top-full shadow-lg">
-            <div class="container mx-auto px-6 py-4 flex flex-col space-y-4">
+          <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>