// Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

// pageYOffset is a read - only window property that returns the number of pixels the document has been scrolled vertically.

// slice extracts a section of a string without modifying original string

//offsetTop - A Number, representing the top position of the element, in pixels

// ********** set date ************

const date = document.getElementById('date');

date.innerHTML = new Date().getFullYear();

// ********** close links ************

const navToggle = document.querySelector(".nav-toggle");

const linksContainer = document.querySelector(".links-container");

const links = document.querySelector(".links");

navToggle.addEventListener("click", function() {

//linksContainer.classList.toggle("show-links")

const containerHeight = linksContainer.getBoundingClientRect().height;

console.log(containerHeight);

const linksHeight = links.getBoundingClientRect().height;

console.log(linksHeight);

if (containerHeight === 0) {

linksContainer.style.height = `${linksHeight}px`

}

else {

linksContainer.style.height = 0;

}

})

const navbar = document.getElementById("nav");

const topLink = document.querySelector(".top-link")

// ********** fixed navbar ************

window.addEventListener("scroll", function() {

const scrollHeight = window.pageYOffset;

const navHeight = navbar.getBoundingClientRect().height;

console.log(scrollHeight)

if (scrollHeight > navHeight) {

navbar.classList.add('fixed-nav')

}

else {

navbar.classList.remove("fixed-nav")

}

if (scrollHeight > 500) {

topLink.classList.add("show-link")

}

else {

topLink.classList.remove("show-link")

}

})

// ********** smooth scroll ************

// select links

const scrollLinks = document.querySelectorAll('.scroll-link');

scrollLinks.forEach(function(link) {

link.addEventListener("click", function(e) {

//prevent defaults

e.preventDefault();

const id = e.currentTarget.getAttribute('href').slice(1);

console.log(id);

const element = document.getElementById(id);

//calculate the heights

const navHeight = navbar.getBoundingClientRect().height;

const containerHeight = linksContainer.getBoundingClientRect().height;

const fixedNav = navbar.classList.contains("fixed-nav")

let position = element.offsetTop - navHeight;

if (!fixedNav) {

position = position - navHeight;

}

if (navHeight > 82) {

position = position + containerHeight;

}

console.log(position);

window.scrollTo({

left:0, top: position

})

linksContainer.style.height = 0;

})

})