OpenAuth_views/src/pages/User/NavigationBar.svelte

<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; */
  }

  .subcomponent {
    padding: 0 var(--rel-size);
    margin: 0;
    margin-left: calc(var(--rel-size) * 6);
  }

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

  .icon {
    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);
  }

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

  .title {
    /* margin: auto; */
    margin-left: calc(var(--rel-size) * 1.5);
    /* padding-left: var(--rel-size); */
    /* height: 100%; */
  }

  .divide {
    position: relative;
    margin-top: var(--rel-size);
    padding-top: var(--rel-size);
  }

  .divide::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    width: 100%; /* or 100px */
    transform: scaleX(0.8);
    border-top: 1px solid var(--on-background);
  }
</style>

{#each pages as page}
  <div class:divide={page.divide}>
    <div
      class="container"
      class:active={page === active}
      on:click={() => open(page.id)}>
      <div class="icon">
        {#if typeof page.icon === 'string'}
          <img alt={page.title} src={page.icon} />
        {:else}
          <svelte:component this={page.icon} />
        {/if}
      </div>
      <h3 class="title">{page.title}</h3>
    </div>
    {#if page.subComponents}
      {#each page.subComponents as sub}
        <h3 class="subcomponent">{sub.title}</h3>
      {/each}
    {/if}
  </div>
{/each}