// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.


const primaryNav = document.querySelector('.primary-navigation'); 
const navToggle = document.querySelector('.mobile-nav-toggle');


navToggle.addEventListener('click', () => {
    const visibility = primaryNav.getAttribute('data-visible');

    if (visibility == "false") {
        primaryNav.setAttribute('data-visible', "true");
        navToggle.setAttribute('aria-expanded', "true");
    }
    else {
        primaryNav.setAttribute('data-visible', "false");
        navToggle.setAttribute('aria-expanded', "false");
    }

    navToggle.classList.toggle('active');
});

let Triangles = document.querySelectorAll('.Triangle')

Array.from(Triangles).forEach(function (Triangle) {

    // play normal
    Triangle.addEventListener('mouseover', () => {
        Triangle.classList.add('active')
    })

    // play in reverse
    Triangle.addEventListener('mouseout', () => {
        Triangle.style.opacity = 0 // avoid showing the init style while switching the 'active' class*/

        Triangle.classList.add('in-active')
        Triangle.classList.remove('active')

        // force dom update
        setTimeout(() => {
            Triangle.classList.add('active')
            Triangle.style.opacity = ''
        }, 1)

        Triangle.addEventListener('animationend', onanimationend)
    })
});
function onanimationend() {
    this.classList.remove('active', 'in-active')
    this.removeEventListener('animationend', onanimationend)
}