strand/src/App.svelte

<script lang="ts">
    // import svelteLogo from "./assets/svelte.svg";
    // import viteLogo from "/vite.svg";
    import { currentView } from "./lib/store";
    import Nav from "./lib/Nav.svelte";
    import Summary from "./lib/Summary.svelte";
    import GymProgress from "./lib/GymProgress.svelte";
    import CardioProgress from "./lib/CardioProgress.svelte";
    import DietProgress from "./lib/DietProgress.svelte";
</script>

<div class="chrome">
    <main>
        {#if $currentView === 0}
            <Summary />
        {/if}
        {#if $currentView === 1}
            <GymProgress />
        {/if}
        {#if $currentView === 2}
            <CardioProgress />
        {/if}
        {#if $currentView === 3}
            <DietProgress />
        {/if}
    </main>
</div>

<style>
    .chrome {
        height: 100vh;
        display: flex;
        flex-direction: column-reverse;

        main {
            flex: 1;
            overflow: auto;
            text-align: center;
            padding: 0.5em;
        }
    }
</style>