svelte navigation / layout gist

App.svelte

<script>
import Box from './Box.svelte';
import C1 from './C1.svelte';
import C2 from './C2.svelte';
    let display = "one";
    let value = "one";

    function one() {
		display = "one";
		value = "one";
	}
	
	function two() {
		display = "two";
		value = "two";
	}

</script>

<button on:click={one}>one</button>
<button on:click={two}>two</button>

<p>value : {value}</p>
    <p>display : {display}</p>
<Box>    
	{#if (display=="one")}
    <C1/>
    
	{:else if (display == "two")}
    <C2/>    
	{:else}
	<p>
		default value
	</p>
	{/if}
    <hr/>
    <p>box footer - {value}</p>
	
</Box>

Box.svelte

<style>
        .box {
            width: 300px;
            border: 1px solid #aaa;
            border-radius: 2px;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
            padding: 1em;
            margin: 0 0 1em 0;
        }
    </style>
    
    <div class="box">
        <slot></slot>
    </div>

C1.svelte

<script>
console.log("init C1");
</script>
<p>
        component 1
    </p>

C2.svelte

<script>
        console.log("init C2");
        </script>
<p>
        component 2
    </p>

also on svelte REPL