<script>
  export let open;
  export let active;
  export let pages = [];
</script>

<style>
  :root {
    --rel-size: 0.75rem;
  }

  .container {
    height: calc(var(--rel-size) * 3);
    padding: var(--rel-size);
    display: flex;
    /* align-content: center; */
    align-items: center;
    /* justify-content: center; */
  }

  .active {
    background: rgba(0, 0, 0, 0.1);
  }

  .icon {
    /* float: left; */
    width: calc(var(--rel-size) * 3);
    height: calc(var(--rel-size) * 3);
  }

  .icon > img {
    width: calc(var(--rel-size) * 3);
    height: calc(var(--rel-size) * 3);
  }

  .title {
    /* margin: auto; */
    margin-left: var(--rel-size);
    /* height: 100%; */
  }
</style>

{#each pages as page}
  <div
    class={'container' + (page === active ? ' active' : '')}
    on:click={() => open(page.id)}>
    <div class="icon">
      <img alt={page.title} src={page.icon} />
    </div>
    <h3 class="title">{page.title}</h3>
  </div>
{/each}
