script.js

console.log("Hello world");


//Set current year
const yearEl = document.querySelector('.year');
const currentYear = new Date().getFullYear();
console.log(currentYear)
yearEl.textContent = currentYear;

//MAKE MOBILE NAV WORK
const btnNavEl = document.querySelector(".btn-mobile-nav");
const headerEl = document.querySelector(".header");

btnNavEl.addEventListener('click', function() {
    headerEl.classList.toggle("nav-open");
});
/////////////////////////////////////////
//smooth scroliing animation

const allLinks = document.querySelectorAll('a:link');

allLinks.forEach(function(link) {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const href = link.getAttribute('href');
        console.log(href);
//Scroll back to top
        if (href === "#") window.scrollTo({
            top:0,
            behavior:"smooth",
        });
//Scroll to other links
        if (href !== "#" && href.startsWith("#") ) {
            const sectionEl = document.querySelector(href);
            sectionEl.scrollIntoView({ behavior: "smooth" });
        }
//close mobile nav
        if (link.classList.contains('main-nav-link'))
        headerEl.classList.toggle("nav-open");

    });
});
/////////////////////////////////////////////
//Sticky nav

const sectionHeroEl = document.querySelector(".section-hero");

const obs = new IntersectionObserver(
    function (entries) {
        const ent = entries[0];
        console.log(ent);


        if(ent.isIntersecting === false) { 
        document.body.classList.add("sticky");
    }
        if (ent.isIntersecting === true) {
        document.body.classList.remove("sticky");
    }

},
{
    root:null,
    threshold:0,
    rootMargin: "-80px",
} );

obs.observe(sectionHeroEl);




/////////////////////////////////////////
//Fixing Flexbox gap property missing in safari version
function checkFlexGap(){
    var flex = document.createElement("div")
    flex.style.display = "flex";
    flex.style.flexDirection ="column";
    flex.style.rowGap ="1px"

    flex.appendChild(document.createElement("div"));
    flex.appendChild(document.createElement("div"));

    document.body.appendChild(flex);
    var isSupported =flex.scrollHeight === 1;
    flex.parentNode.removeChild(flex);
    console.log(isSupported)

    if(!isSupported) document.body.classList.add("no-flexbox-gap");
}
checkFlexGap();

///////////////////////////////////////////