InitalCommit

WebAp/wwwroot/js/site.js

@@ -0,0 +1,54 @@
+// 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)
+}