Left Menu Paddle Sticking

[kglebows]

it should 'stick' to the selected option and highlight whatever option is displayed on the right

( my old JS had that )

function stickPaddleToMenuOption(paddle, option) {
	  const optionRect = option.getBoundingClientRect();
	  paddle.style.top = `${optionRect.top + optionRect.height / 2 - paddle.offsetHeight / 2}px`;
	}

	leftMenuOptions.forEach(option => {
	  option.addEventListener('mouseenter', () => stickPaddleToMenuOption(leftPaddle, option));
	});

	rightMenuOptions.forEach(option => {
	  option.addEventListener('mouseenter', () => stickPaddleToMenuOption(rightPaddle, option));
	});

	updatePaddlePositions();
	window.addEventListener('resize', updatePaddlePositions);

	rightMenuContainer.addEventListener('mouseover', event => {
        const option = event.target.closest('.menu-option');
        if (option) {
            stickPaddleToMenuOption(rightPaddle, option);
        }
    });

    // Use event delegation for statically loaded content in the left-menu
    document.querySelector('left-menu').addEventListener('mouseover', event => {
        const option = event.target.closest('.menu-option');
        if (option) {
            stickPaddleToMenuOption(leftPaddle, option);
        }
    });

and

	leftMenuOptions.forEach((leftOption, index) => {
	  leftOption.addEventListener('mouseover', () => {
		if (currentIndex !== index) {
		  loadRightMenuContent(index);
		  highlightLeftOption(index);
		  currentIndex = index;
		}
	  });
	}

	function highlightLeftOption(index) {
	  unhighlightLeftOptions();
	  const button = leftMenuOptions[index].querySelector('button');
	  button.classList.add('glowing-effect');
	}

	function unhighlightLeftOptions() {
		leftMenuOptions.forEach(option => {
		  const button = option.querySelector('button');
		  button.classList.remove('glowing-effect');
		});
	}

[RealConrad]

I do not plan on implementing/fixing this.

Will add it if I have time this weekend.