test nav

src/js/01-nav.js

@@ -39,16 +39,44 @@
     }
   })
 
-  // document.querySelectorAll('.nav-link').forEach(function (link) {
-  //   link.addEventListener('click', function (e) {
-  //     e.preventDefault() // 기본 링크 동작 방지
-  //     var parentToggle = link.closest('.nav-item').querySelector('.nav-item-toggle')
-  //     if (parentToggle) {
-  //       parentToggle.click() // 트리 토글
-  //     }
-  //     window.location.href = link.href // 첫 번째 링크로 이동
-  //   })
-  // })
+  find(menuPanel, '.nav-link').forEach(function (link) {
+    link.addEventListener('click', function (e) {
+      var li = this.parentElement
+      if (!li.classList.contains('is-active')) {
+        e.preventDefault() // 기본 링크 이동을 막음
+        toggleActive.call(li) // 펼쳐짐/접힘 동작 수행
+        window.location = this.href // 링크 이동을 명시적으로 호출
+      }
+    })
+  })
+
+  find(menuPanel, '.nav-link').forEach(function (link) {
+    link.addEventListener('click', function (e) {
+      var li = this.parentElement
+      var currentDepth = parseInt(li.dataset.depth, 10) // 현재 nav-item의 depth 가져오기
+
+      // href가 '#'인 경우 (클릭한 항목이 단순 펼침 액션 대상일 때)
+      if (this.getAttribute('href') === '#') {
+        // 다음 depth의 항목을 찾음 (현재 depth + 1)
+        var nextDepth = currentDepth + 1
+        var subNavList = li.querySelector('.nav-list') // 하위 리스트를 찾음
+        var firstSubNavItem = subNavList
+          ? subNavList.querySelector('.nav-item[data-depth="' + nextDepth + '"] .nav-link')
+          : null
+
+        // 다음 depth의 항목이 있을 경우
+        if (firstSubNavItem && firstSubNavItem.href) {
+          e.preventDefault() // 기본 동작 방지
+          toggleActive.call(li) // 펼쳐짐 액션 수행
+          window.location = firstSubNavItem.href // 다음 depth의 첫 항목으로 이동
+        } else {
+          toggleActive.call(li) // 다음 depth 항목이 없을 경우 펼쳐짐 액션만 수행
+        }
+      } else {
+        toggleActive.call(li) // href가 '#'이 아닌 경우 그냥 펼쳐짐 액션만 수행
+      }
+    })
+  })
 
   if (navMenuToggle && menuPanel.querySelector('.nav-item-toggle')) {
     navMenuToggle.style.display = ''
@@ -120,7 +148,6 @@
       }
     }
     var navItem
-    console.log(navLink)
     if (navLink) {
       navItem = navLink.parentNode
     } else if (originalPageItem) {