const snbNav = document.querySelector(".snb-nav");
const snbNavDepth = snbNav.querySelectorAll("ul");
const snbItem = document.querySelectorAll(".snb-item");
const arrowBtn = document.querySelectorAll(".arrow-btn");

const depth1SnbItem = document.querySelectorAll(".depth1 .snb-item");
const depth2SnbItem = document.querySelectorAll(".depth2 .snb-item");
const depth3SnbItem = document.querySelectorAll(".depth3 .snb-item");
const depth4SnbItem = document.querySelectorAll(".depth4 .snb-item");

var activeSplit = active ? active.split('-') : '';
var activeConcat = '';
for(let activeArrow of activeSplit){
    activeConcat += activeArrow;
    console.log(document.querySelector('[href="'+activeConcat+'"]'));
    document.querySelector('[href="'+activeConcat+'"]').parentNode.classList.add('dev-arrow-btn');
    activeConcat += '-';
    
}
for (let arrBtn of arrowBtn) {
    arrBtn.addEventListener("click", function () {
        this.classList.toggle("on");
    });
}

for (let navs of snbItem) {
    if(navs.classList.contains('dev-arrow-btn')){
        navs.insertAdjacentHTML('beforeend', '<button type="button" class="arrow-btn"></button>');
    }else{
        navs.classList.add("dev-hidden");
    }
    navs.addEventListener("click", (e) => {
        e.preventDefault();
        const _el = e.target.parentElement.parentElement;
        _el.classList.toggle("on");
        if (_el.classList.contains("on")) {
            e.preventDefault();
            const _nel = e.target.nextElementSibling;
            _nel && _nel.classList.add("on");
            for (let navs of _el.querySelectorAll(".snb-item")) {
                navs.classList.remove("dev-hidden");
            }
        }
    });
}

for (let allDepth of snbNavDepth) {
    document.addEventListener("click", (e) => {
        if (!snbNav.contains(e.target)) {
            allDepth.classList.remove("on");
            for (let navs of snbItem) {
                if(!navs.classList.contains('dev-arrow-btn')){
                    navs.classList.add("dev-hidden");
                }
            }
        }
    });
}