https://pldtenterprise.com/combine/9949d4bd819e1d0ac82f02421ea00e40-1762494576

1document.addEventListener("DOMContentLoaded", function () {
2    console.log('mobile js loaded')
3  const MOBILE_BREAKPOINT = 1200;
4
5  let isMobileMenuActive = false;
6
7  const toggleBtn = document.querySelector(".js-toggleBurgerNav");
8  const megaMenuMobile = document.querySelector(".c-mega-menu-mobile");
9  const menuIcon = toggleBtn?.querySelector("img");
10  const closeIcon = toggleBtn?.querySelector("svg");
11
12  const childMenuContainer = document.querySelector(".c-mega-menu-mobile-children");
13  const childPanels = document.querySelectorAll(".child-links-panel");
14  const sublinkPanels = document.querySelectorAll(".sublinks-panel");
15  const featuredProducts = document.querySelectorAll(".c-featured-product-second-level-mobile");
16
17  const mainLinks = document.querySelectorAll(".js-mainLinkMobile");
18  const parentItems = document.querySelectorAll(".parent-items-mobile");
19  const childLinks = document.querySelectorAll(".child-link-item");
20  const backBtns = document.querySelectorAll(".child-links-panel .js-backToMenu");
21
22    function initMobileMenu() {
23    if (window.innerWidth <= MOBILE_BREAKPOINT && !isMobileMenuActive) {
24      isMobileMenuActive = true;
25
26      console.log('toggleBtn:', toggleBtn);
27console.log('megaMenuMobile:', megaMenuMobile);
28console.log('event listener attached');
29      if (!toggleBtn) return;
30
31      closeIcon.style.display = "none";
32
33      toggleBtn.addEventListener("click", toggleBurger);
34      console.log('click')
35      mainLinks.forEach(link => link.addEventListener("click", handleMainLink));
36      parentItems.forEach(item => item.addEventListener("click", handleParentItem));
37      childLinks.forEach(link => link.addEventListener("click", handleChildLink));
38      backBtns.forEach(btn => btn.addEventListener("click", handleBack));
39    } else if (window.innerWidth > MOBILE_BREAKPOINT && isMobileMenuActive) {
40      isMobileMenuActive = false;
41      resetMobileMenu();
42
43      // Remove event listeners
44      toggleBtn.removeEventListener("click", toggleBurger);
45      mainLinks.forEach(link => link.removeEventListener("click", handleMainLink));
46      parentItems.forEach(item => item.removeEventListener("click", handleParentItem));
47      childLinks.forEach(link => link.removeEventListener("click", handleChildLink));
48      backBtns.forEach(btn => btn.removeEventListener("click", handleBack));
49    }
50  }
51
52  const lockScroll = () => {
53    document.body.style.overflow = "hidden";
54  };
55
56// Unlock scroll
57  const unlockScroll = () => {
58    document.body.style.overflow = "";
59  };
60
61  function toggleBurger() {
62      console.log('toggleBurger hit');
63console.log('classList before:', megaMenuMobile.classList.value);
64      const isActive = megaMenuMobile.classList.toggle("active");
65       console.log('classList after:', megaMenuMobile.classList.value);
66      if (isActive) {
67        megaMenuMobile.style.display = "block";
68        childMenuContainer.style.display = "none";
69        menuIcon.style.display = "none";
70        closeIcon.style.display = "block";
71
72        lockScroll(); // ✅ just overflow hidden
73      } else {
74        resetMobileMenu();
75        unlockScroll(); // ✅ restore
76      }
77    }
78
79      function resetMobileMenu() {
80    megaMenuMobile.style.display = "none";
81    childMenuContainer.style.display = "none";
82
83    childPanels.forEach(panel => (panel.style.display = "none"));
84    sublinkPanels.forEach(panel => (panel.style.display = "none"));
85    featuredProducts.forEach(fp => (fp.style.display = "none"));
86    // mobile_topBar.style.display = "none";
87
88    document.querySelectorAll(".js-mainLinkMobile svg").forEach(svg => svg.classList.remove("rotated"));
89    document.querySelectorAll(".js-parentsLinkMobile").forEach(ul => {
90      ul.classList.remove("active");
91      ul.style.display = "none";
92    });
93    document.querySelectorAll(".child-link-item").forEach(link => link.classList.remove("active"));
94    document.querySelectorAll(".child-link-item .description").forEach(desc => (desc.style.display = "none"));
95
96    menuIcon.style.display = "block";
97    closeIcon.style.display = "none";
98  }
99
100    // Main link toggle
101  function handleMainLink(e) {
102    e.preventDefault();
103    const parentLinks = this.nextElementSibling;
104    const arrowIcon = this.querySelector("svg");
105
106    if (!parentLinks || !parentLinks.classList.contains("js-parentsLinkMobile")) return;
107
108    document.querySelectorAll(".js-parentsLinkMobile").forEach(ul => {
109      if (ul !== parentLinks) {
110        ul.style.display = "none";
111        ul.classList.remove("active");
112      }
113    });

114    document.querySelectorAll(".js-mainLinkMobile svg").forEach(svg => {
115      if (svg !== arrowIcon) svg.classList.remove("rotated");
116    });
117
118    const isActive = parentLinks.classList.toggle("active");
119    parentLinks.style.display = isActive ? "flex" : "none";
120    if (arrowIcon) arrowIcon.classList.toggle("rotated", isActive);
121  }
122
123    function handleParentItem(e) {
124    e.preventDefault();
125    const parentId = this.dataset.parent;
126
127    megaMenuMobile.style.display = "none";
128    childPanels.forEach(panel => (panel.style.display = "none"));
129
130     const targetPanel = document.querySelector(`.child-links-panel[data-parent="${CSS.escape(parentId)}"]`);
131    if (targetPanel) {
132      childMenuContainer.style.display = "block";
133      targetPanel.style.display = "flex";
134
135      featuredProducts.forEach(fp => (fp.style.display = "none"));
136      const featuredProduct = document.querySelector(`.c-featured-product-second-level-mobile[data-parent="${CSS.escape(parentId)}"]`);
137      if (featuredProduct) featuredProduct.style.display = "flex";
138
139      targetPanel.querySelectorAll(".child-link-item").forEach(l => l.classList.remove("active"));
140      targetPanel.querySelectorAll(".child-link-item .description").forEach(d => (d.style.display = "none"));
141      targetPanel.querySelectorAll(".sublinks-panel").forEach(p => (p.style.display = "none"));
142
143    }
144  }
145
146    function handleChildLink(e) {
147    // e.preventDefault();
148    const parentId = this.closest(".child-links-panel").dataset.parent;
149
150    document.querySelectorAll(".child-link-item .description").forEach(desc => (desc.style.display = "none"));
151    childLinks.forEach(l => l.classList.remove("active"));
152
153    this.classList.add("active");
154
155    const desc = this.querySelector(".description");
156    if (desc) desc.style.display = "block";
157
158    document.querySelectorAll(".sublinks-panel").forEach(panel => (panel.style.display = "none"));
159
160    const childId = this.dataset.child;
161    const targetPanel = document.querySelector(`.sublinks-panel[data-child="${CSS.escape(childId)}"]`);
162    if (targetPanel) targetPanel.style.display = "flex";
163
164    const featuredProduct = document.querySelector(`.c-featured-product-second-level-mobile[data-parent="${CSS.escape(parentId)}"]`);
165    if (featuredProduct) featuredProduct.style.display = "none";
166  }
167
168    function handleBack() {
169    childMenuContainer.style.display = "none";
170    megaMenuMobile.style.display = "block";
171
172    childPanels.forEach(panel => (panel.style.display = "none"));
173    sublinkPanels.forEach(panel => (panel.style.display = "none"));
174    featuredProducts.forEach(fp => (fp.style.display = "none"));
175    // mobile_topBar.style.display = "none";
176  }
177
178    const checkScrollMenu = () => {
179  const headerLinks = document.querySelector('.c-navbar-mobile');
180  const headerNav = document.querySelector('.c-navbar-mobile');
181  const offsetHeightLinks = headerLinks.offsetHeight;
182  const top = window.scrollY;
183
184  // Sticky header
185  if (top >= offsetHeightLinks) {
186    headerNav.classList.add('fixed-top', 'position-fixed');
187  } else {
188    headerNav.classList.remove('fixed-top', 'position-fixed');
189  }
190};
191
192// Attach scroll listener
193window.addEventListener('scroll', checkScrollMenu);
194
195  // Initialize on page load
196  initMobileMenu();
197
198  // Handle resize
199  window.addEventListener("resize", initMobileMenu);
200
201});