import { Scrollactive } from 'svelte-scrollactive';

import { onMount } from 'svelte';

let elements= [];

let alwaysTrack = false;

let duration = 600;

let clickToScroll = true;

let offset = 52;

let easing = '.5,0,.35,1';

let scrollToElement;

$: numberOfElements = elements.length;

onMount(() => {

elements = document.querySelectorAll('.scrollactive-item');

});

function addNewElement() {

const sectionNumber = numberOfElements + 1;

const colorClass = numberOfElements % 2 === 0 ? 'is-primary' : 'is-danger';

const menuItem = document.createElement('div');

menuItem.innerHTML = `<a href="#section-${sectionNumber}" class="scrollactive-item nav-item">Section ${sectionNumber}</a>`;

document.querySelector('.nav-center').appendChild(menuItem.firstChild);

const section = document.createElement('div');

section.innerHTML = `<section id="section-${sectionNumber}" class="section hero ${colorClass} is-fullheight">

<div class="container">

<h1 class="heading title is-1">Section ${sectionNumber}</h1>

</div>

</section>

`;

document.querySelector('main').appendChild(section.firstChild);

elements = document.querySelectorAll('.scrollactive-item');

}