<script>
	import Router from 'svelte-navaid/Router.svelte';
	import Route from 'svelte-navaid/Route.svelte';
    import {onDestroy} from 'svelte';
    import Nav from './components/Nav.svelte';
    
    import Home from './routes/Home.svelte'
    import Button from './routes/Button.svelte'
    import tmp from './routes/temp.svelte'
    import Joe from './routes/Joe.svelte'
    
    
    let navigate;
    const routes = [
        {path: "/", component: Home},
        {path: "Button", component: Button},
        {path: "tmp", component: tmp},
        {path: 'joe', component: Joe}
    ];
</script>


<Router bind:navigate >
    <Nav {navigate}/>
    <main>
        {#each routes as route}
            <Route path={route.path} component={route.component}/>
        {/each}


        <Route>
            <h1 style="text-align:  center; margin: 0 auto; font-size: 10em">404</h1>
        </Route>
    </main>
</Router>

<style>
    main {
        position: relative;
        max-width: 80em;
        background-color: white;
        padding: 2em;
        margin: 0 auto;
        box-sizing: border-box;
    }
</style>