document.addEventListener('DOMContentLoaded', function() {
    // Create the toggle arrow
    var toggleArrow = document.createElement('div');
    toggleArrow.id = 'toggleArrow';
    toggleArrow.style.cursor = 'pointer';
    toggleArrow.innerHTML = '»'; // Right double angle quote symbol

    // Append the toggle arrow after the first socialIcons container found
    var socialIcons = document.querySelector('.socialIcon');
    if (socialIcons) {
        socialIcons.parentNode.insertBefore(toggleArrow, socialIcons.nextSibling);

        // Add event listeners for mouse enter and leave
        toggleArrow.addEventListener('mouseenter', function() {
            this.style.opacity = '1'; // Show arrow
        });

        toggleArrow.addEventListener('mouseleave', function() {
            this.style.opacity = '0'; // Hide arrow
        });

        // Add the event listener for the toggle functionality
        toggleArrow.addEventListener('click', function() {
            if (socialIcons.style.display === 'none' || window.getComputedStyle(socialIcons).display === 'none') {
                socialIcons.style.display = 'block';
                this.innerHTML = '»'; // Right double angle quote symbol
            } else {
                socialIcons.style.display = 'none';
                this.innerHTML = '«'; // Left double angle quote symbol
            }
        });
    }
});