main.js

let list = document.querySelectorAll('.projects div');

function activeLink() {
    list.forEach(item => {
        item.classList.remove('hovered');
    });
    this.classList.add('hovered');
}

list.forEach(item => item.addEventListener('click', activeLink))

//    FUNCTION MOUSEOVER POUR LA SIDEBAR

let sidebar = document.querySelector('.sidebar');
let toggle = document.querySelector('.active-sidebar');
let main = document.querySelector('.main');
let nav = document.querySelector('nav');
let Name = document.querySelector('.projects h2');
let container = document.querySelector('.container');
let about = document.querySelector('.about');
let contact = document.querySelector('.contact');
let footer = document.querySelector('footer');
let projectRecents = document.querySelector('.projects-recents');
let Display = document.querySelector('.sidebar .projects div a span');

toggle.addEventListener('click', () => {
    sidebar.classList.toggle('active');
    main.classList.toggle('active');
    Name.classList.toggle('active');
    nav.classList.toggle('active');
    container.classList.toggle('active');
    about.classList.toggle('active');
    contact.classList.toggle('active');
    footer.classList.toggle('active');
    projectRecents.classList.toggle('active');
    Display.forEach(display => {
        display.classList.toggle('active');
    })
});

const scroller = document.querySelector('.scroller');

if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    addAnimation();
}

function addAnimation() {
    scroller.setAttribute('data-animated', true);
}

function loadIframe(src, name) {
    const iframe = document.getElementById('myIframe');
    const mainContainer = document.querySelector('.total-contain');
    const nom = document.querySelector('.final-header h2');

    // changer la source de l'iframe
    iframe.src = src;

    // Cacher le conteneur principal
    mainContainer.classList.add('hidden');

    // Afficher l'iframe
    iframe.classList.remove('hidden');

    // Reduire la sidebar
    sidebar.style.minHeight = '120vh';

    // Changer la navproject
    nom.innerHTML = `Final Project | ${name}`
}