<script>
  import Router from 'svelte-spa-router';
  import routes from './routes';
  import { link } from 'svelte-spa-router';
  import Icon from './components/Icon.svelte';
  import Darkmode from './components/Darkmode.svelte';
</script>

<style>
  header {
  }

  main {
  }

  footer {
    display: flex;
    flex: flex-grow;
    flex-direction: row;
  }

  footer nav {
    flex: 1;
  }
</style>

<header>
  <nav>
    <a href="/" use:link>
      <Icon name="trash-2" size="64" />
    </a>
    <ul>
      <li><a href="/demos" use:link>Demos</a></li>
    </ul>
  </nav>
</header>

<main>
    <Router {routes } restoreScrollState={true} />
</main>

<hr>
<footer>
  <nav>
    <a href="/" use:link>
      <p>Copyright (C) Zed A. Shaw. All rights reserved.</p>
    </a>
    <ul>
      <li><a href="https://twitter.com/lzsthw"><Icon name="twitter" size="32" /></a></li>
      <li><a href="https://instagram.com/zedshaw"><Icon name="instagram" size="32" /></li>
      <li><Darkmode /></li>
    </ul>
  </nav>
</footer>
