//my first pen.Hüseyin 11.july.2022 
let takeFirstPosition = document.getElementById("firstItem").getBoundingClientRect().left; //we got the position of the first item 
let takeFirstWidth = document.getElementById("firstItem").offsetWidth; //we got the position of the first item 

var activePosition = $("#navbarSupportedContent .nav-item.active")[0].getBoundingClientRect().left - takeFirstPosition; //we got the position of the current active item
var activeWidth = $("#navbarSupportedContent .nav-item.active")[0].offsetWidth; 

let takeFirstWidthPX = takeFirstWidth + "px"; //we add px to the end to use it in the css 

document.getElementById("playful_border").style.width = activeWidth + "px"; // we give the initial width of the border 
document.getElementById("playful_border").style.left = activePosition + "px";  // we give the initial position of the border 

let allItems = document.querySelectorAll("#my_navbar li"); //We got all the items in the form of a node list.

function my_mouseEnter(){
    let width = this.offsetWidth;   //get width of mouse over button
    let relativePos = this.getBoundingClientRect().left - takeFirstPosition; //get the relative position of the mouse-over button

    let widthPX = width +"px";  //add px to the end to use in css
    let relativePosPX =relativePos +"px";

    document.getElementById("playful_border").style.width = widthPX; // change positin
    document.getElementById("playful_border").style.left = relativePosPX; //change width
}

//return to starting position
function my_mouseExit(){
    document.getElementById("playful_border").style.width = activeWidth + "px";
    document.getElementById("playful_border").style.left = activePosition + "px"; 
}

//We added functions to all of the data in the node list with the help of loop.
for (let x of allItems){                    
    x.addEventListener("mouseover", my_mouseEnter);    
    x.addEventListener("mouseout", my_mouseExit);   
}

$("#navbarSupportedContent .nav-item").click(function(){
    $("#navbarSupportedContent .nav-item.active .nav-link.active").removeClass("active");
    $("#navbarSupportedContent .nav-item.active").removeClass("active");
    
    $(this).addClass("active");
    $(this).find(".nav-link").addClass("active");

    activePosition = $("#navbarSupportedContent .nav-item.active")[0].getBoundingClientRect().left - takeFirstPosition;
    activeWidth = $("#navbarSupportedContent .nav-item.active")[0].offsetWidth; 

    document.getElementById("playful_border").style.width = activeWidth + "px";
    document.getElementById("playful_border").style.left = activePosition + "px";
});