51 lines
1.6 KiB
Svelte
51 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { writable } from 'svelte/store';
|
|
|
|
export const activeSection = writable('home');
|
|
|
|
function smoothScrollTo(elementId: string) {
|
|
const element = document.getElementById(elementId);
|
|
if (element) {
|
|
element.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateActiveSection() {
|
|
const sections = document.querySelectorAll('.page');
|
|
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.offsetHeight;
|
|
|
|
if (window.scrollY >= sectionTop && window.scrollY < (sectionTop + sectionHeight)) {
|
|
activeSection.set(section.id);
|
|
}
|
|
});
|
|
}
|
|
|
|
onMount(() => {
|
|
window.addEventListener('scroll', updateActiveSection);
|
|
});
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
// Trigger redirection on Enter key or Space bar
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
smoothScrollTo('home');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<ul class="dial-navbar">
|
|
<li class="page" id="home" on:click={() => smoothScrollTo('home')} class:active={$activeSection === 'home'}>Home</li>
|
|
<li class="page" id="about" on:click={() => smoothScrollTo('about')} class:active={$activeSection === 'about'}>About</li>
|
|
<li class="page" id="projects" on:click={() => smoothScrollTo('projects')} class:active={$activeSection === 'projects'}>Projects</li>
|
|
<li class="page" id="socials" on:click={() => smoothScrollTo('socials')} class:active={$activeSection === 'socials'}>Socials</li>
|
|
</ul>
|
|
|
|
<style lang="scss">
|
|
@import "../assets/navbar.scss";
|
|
</style>
|