//Nav slide in logic

const nav = document.querySelector('.st-nav');
const openNavButton = document.querySelector('.st-open-nav');
const closeNavButton = document.querySelector('.st-close-nav');

openNavButton.addEventListener('click', () => {
    nav.classList.add('st-nav-is-open');
});

closeNavButton.addEventListener('click', () => {
    nav.classList.remove('st-nav-is-open');
});

//Search slide logic

const searchOverlay = document.querySelector('.st-search-overlay');
const openSearchButton = document.querySelector('.st-open-search');
const closeSearchButton = document.querySelector('.st-close-search');

openSearchButton.addEventListener('click', () => {
    searchOverlay.classList.add('st-search-is-open');
});

closeSearchButton.addEventListener('click', () => {
    searchOverlay.classList.remove('st-search-is-open');
});

//Sticky nav logic

const iconBar = document.querySelector('.st-header-icon-bar');
const siteTitle = document.querySelector('.st-site-title');
const header = document.querySelector('.st-header');
let lastScrollPosition = 0;
const scrollDepthActivationPoint = 100;

window.addEventListener('scroll', function(event) {
    const scrollPosition = window.scrollY;

    if(scrollPosition < scrollDepthActivationPoint) {
        iconBar.classList.remove('st-icon-bar-sticky');
        siteTitle.classList.remove('st-title-scrolled');
        header.classList.remove('st-header-scrolled');
    } else {
        if(lastScrollPosition < scrollDepthActivationPoint) {
            iconBar.classList.add('st-icon-bar-sticky');
            siteTitle.classList.add('st-title-scrolled');
            header.classList.add('st-header-scrolled');
        } 
    }
    
    lastScrollPosition = scrollPosition;
});