Додані повідомлення та перепрацьована структура застосунку та api

web/lib/router/routes.js

@@ -94,12 +94,55 @@ Router
         pageActive();
     })
 
-function pageActive(element) {
-    const active = document.querySelector("nav li [data-state='active']");
-    if (active) active.setAttribute('data-state', '');
+// function pageActive(element) {
+//     const active = document.querySelector("nav-item[data-state='active']");   
+//     if (active) active.setAttribute('data-state', '');
 
+//     if (element) {
+//         const target = document.getElementById(`menu-${element}`);
+//         if (target) target.setAttribute('data-state', 'active');
+//     }
+// }
+function pageActive(element) {
+    // 1. Знаходимо контейнер меню
+    const navContainer = document.querySelector('navigation-container');
+
+    if (!navContainer) {
+        console.warn('Компонент <navigation-container> не знайдено.');
+        return;
+    }
+    
+    // 2. Видаляємо активний стан у всіх елементів.
+    // Шукаємо як у Light DOM (через querySelectorAll на документі),
+    // так і у Shadow DOM (через shadowRoot).
+    const activeInLight = document.querySelector("nav-item[data-state='active']");
+    if (activeInLight) {
+        activeInLight.setAttribute('data-state', '');
+    }
+
+    const activeInShadow = navContainer.shadowRoot.querySelector("nav-item[data-state='active']");
+    if (activeInShadow) {
+        activeInShadow.setAttribute('data-state', '');
+    }
+
+    // 3. Знаходимо цільовий елемент
     if (element) {
-        const target = document.getElementById(`nav-${element}`);
-        if (target) target.setAttribute('data-state', 'active');
+        const targetId = `menu-${element}`;
+        let target = null;
+        
+        // Спробуємо знайти в основному DOM
+        target = document.getElementById(targetId); 
+        
+        // Якщо не знайдено, шукаємо у Shadow DOM контейнера
+        if (!target) {
+             // Використовуємо querySelector для пошуку по всьому shadowRoot
+             // Якщо елементи переміщені у itemsHiddenContainer, вони будуть тут
+             target = navContainer.shadowRoot.querySelector(`#${targetId}`);
+        }
+        
+        // 4. Встановлюємо активний стан, якщо знайдено
+        if (target) {
+            target.setAttribute('data-state', 'active');
+        }
     }
 }