82 lines
1.8 KiB
Svelte
82 lines
1.8 KiB
Svelte
<script>
|
|
import { sectionStore } from "$lib/stores/currentSection";
|
|
import { onMount } from "svelte";
|
|
import { fly, slide } from "svelte/transition";
|
|
|
|
export let page,
|
|
slides,
|
|
includeFirst = true;
|
|
|
|
console.log(page, slides, includeFirst);
|
|
|
|
let newSlides = includeFirst ? slides : slides.slice(1);
|
|
|
|
let pageSection = sectionStore[page];
|
|
|
|
let currentSection = $pageSection;
|
|
|
|
onMount(() => {
|
|
pageSection.subscribe((cs) => {
|
|
console.log(cs);
|
|
currentSection = cs;
|
|
});
|
|
});
|
|
|
|
// let currentSection = 0
|
|
</script>
|
|
|
|
<h1 class="h1">{currentSection}</h1>
|
|
{#if includeFirst ? currentSection >= 0 : currentSection > 0}
|
|
<div
|
|
in:fly={{ x: 50, duration: 300 }}
|
|
out:fly={{ x: 50, duration: 300 }}
|
|
class="tracker"
|
|
>
|
|
{#each slides as _, i}
|
|
<div
|
|
class="tracker-dot {(includeFirst ? i : i + 1) ===
|
|
currentSection
|
|
? 'active'
|
|
: ''}"
|
|
></div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
/* Tracker Styles */
|
|
.tracker {
|
|
position: fixed;
|
|
top: 50%;
|
|
right: 20px;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.tracker-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
@apply bg-surface-600;
|
|
border-radius: 50%;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.tracker-dot.active {
|
|
@apply bg-primary-600;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.tracker-dot {
|
|
@apply bg-surface-300;
|
|
border-radius: 50%;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.tracker-dot.active {
|
|
@apply bg-primary-600;
|
|
}
|
|
}
|
|
</style>
|