<script>
   export let open;
   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; */
   }

   .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" on:click={() => open(page.id)}>
      <div class="icon"><img src={page.icon} /></div>
      <h3 class="title">
         {page.title}
      </h3>
   </div>
{/each}