Template:Vilnius-Lithuania/JS/menuOverlay

var textSection = null; window.addEventListener('load', function(){textSection = document.getElementById("section-text")})

       window.addEventListener('scroll',function() {
           myFunction();

if(textSection != null){

           var navbarTop = document.getElementById("navbar").getBoundingClientRect().top;
           var mainTagTop = textSection.getBoundingClientRect().top;
           if(navbarTop >= mainTagTop){
                   document.getElementById("navbar").setAttribute("onText", "true");
           } else {
document.getElementById("navbar").setAttribute("onText", "false");
       }

} })

       function myFunction() {
           var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
           var height = document.documentElement.scrollHeight - window.innerHeight;
           var scrolled = (winScroll / height) * 100;
           document.getElementById("scrollbar").style.height = scrolled + "%";
       }

function closeMenu(){

var toggleable = document.querySelectorAll('.toggleable');
                   for (let item of toggleable) {
                       item.classList.remove("active");
                   }
                   document.getElementById("fixedOverlay").setAttribute("bg", "none");
                   document.getElementById("appendable").classList.remove(currentChoice);
                   currentChoice = null;
                   const myNode = document.getElementById("appendable");
                   while (myNode.firstChild) {
                       myNode.removeChild(myNode.lastChild);
                   }

}

       var openMenuEls = document.getElementsByClassName("menu-wrapper");
       for (let el of openMenuEls) {
           //Clicking on menu sandwich/close button
           el.addEventListener('click', function() {
               //If any of the items are chosen and close button is clicked, remove active class
               if (this.classList.contains("active")) {
                  closeMenu();
               } else {
                   document.getElementById("popup-main").classList.add("active");
                   this.classList.add("active");
                   document.getElementById("fixedOverlay").setAttribute("bg", "dark");
               }
           })
       }
       var currentChoice;
       var menuLinks = document.getElementsByClassName("main-choice");
       for (let link of menuLinks) {
           link.addEventListener('click', function() {
               for (let lk of menuLinks) {
                   if (lk.classList.contains("active")) {
                       lk.classList.remove("active");
                       const myNode = document.getElementById("appendable");
                       while (myNode.firstChild) {
                           myNode.removeChild(myNode.lastChild);
                       }

                   }
               }
               link.classList.add("active");
               document.getElementById("appendable").classList.remove(currentChoice);

               currentChoice = link.id;
               document.getElementById("popup-next").classList.add("active");
               var items = menuItems[currentChoice];
               document.getElementById("appendable").classList.add(currentChoice)
               for (const [key, value] of Object.entries(menuItems[currentChoice])) {
                   var node = document.createElement("li");
                   var nodeLink = document.createElement("a");
                   nodeLink.href = value.link;
                   nodeLink.innerHTML = value.name;
                   node.appendChild(nodeLink);
                   document.getElementById("appendable").appendChild(node);
               }
               resizeBubble();
           })
       }

$('#appendable li a').on("click", function(){

 closeMenu();

});

       $(window).resize(function() {
           resizeBubble();
       });

       function resizeBubble() {
           $(function() {
               var elementWidth = $("#appendable").width();
               var elementHeight = $("#appendable").height();
               if (elementHeight > elementWidth) {
                   $("#bubbles #popup-next").css("height", elementHeight * 1.15);
                   $("#bubbles #popup-next").css("width", elementHeight * 1.15);
               } else {
                   $("#bubbles #popup-next").css("height", elementWidth * 1.15);
                   $("#bubbles #popup-next").css("width", elementWidth * 1.15);
               }
           });
       }

/*document.getElementById("fixedOverlay").addEventListener('click',function(){

     var isOpen = document.getElementById("popup-main");
               if (isOpen.classList.contains("active")) {
                  closeMenu();
               }

})*/

       var menuItems = {
           project: {
               desc: {
                   name: "Description",
                   link: "./Description"
               },
               imp: {
                   name: "Implementation",
                   link: "./Implementation",
               },
               des: {
                   name: "Design",
                   link: "./Design",
               },
               exp: {
                   name: "Experiments",
                   link: "./Experiments",
               },
               res: {
                   name: "Results",
                   link: "./Results",
               },
               eng: {
                   name: "Engineering",
                   link: "./Engineering",
               },
               pof: {
                   name: "Proof of Concept",
                   link: "./ProofOfConcept",
               },
               mod: {
                   name: "Model",
                   link: "./Model",
               },
               sof: {
                   name: "Software",
                   link: "./Software",
               },
               con: {
                   name: "Contribution",
                   link: "./Contribution",
               }
           },
           parts: {
               par: {
                   name: "Parts",
                   link: "./Parts",
               },
               col: {
                   name: "Parts Collection",
                   link: "./PartsCollection",
               }
           },
           hp: {
               int: {
                   name: "Integrated
Human Practices",
                   link: "./Integrated",
               },
               col: {
                   name: "Education & PE",
                   link: "./Education",
               }
           },
           team: {
               members: {
                   name: "Members",
                   link: "./Team",
               },
               coll: {
                   name: "Collaborations",
                   link: "./Collaborations",
               },
               att: {
                   name: "Attributions",
                   link: "./Attributions",
               }
           }
       }