let menuShape = $(".menu_shape");
let menuShapeBG = $(".menu_shape_bg");
let menuLink = $(".link");
let currentLink = $(".link.w--current");

// On Click Transition
$(".link:not(.w--current)").on("click",function (e) {
     e.preventDefault();
     // menuShapeBG Stretch
     if ($(this).index() > currentLink.index()) {
         menuShape.css("justify-content", "flex-end");
     }
     if (currentLink.index() !== $(this).index()) {
         menuShapeBG.css("transition", `width 200ms`);
         menuShapeBG.css("width", "140%");
         setTimeout(() => {
         menuShapeBG.css("width", "100%");
    }, 200);
    }
     // menuShape move
     menuShape.css("transition",`all 400ms`);
     moveShape($(this));
});

function moveShape(target) {
    let linkWidth = target.innerWidth();
    let linkOffset = target.offset().left;
    let menuOffset = $(".menu_bod").offset().left;
    let leftPos = linkOffset - menuOffset;
    menuShape.css("width", linkWidth);
    menuShape.css("left", leftPos);
}

//On Page Load
moveShape(currentLink);
$(".menu_link_bg").css("opacity", "0");
menuShape.css("opacity", "1");


//Resize
window.addEventListener("resize", function() {
    moveShape(currentLink);
})