<script>
  import Icon from "$/client/components/Icon.svelte";

  export let menu = [
    {title: "Calendar", active: false, icon: "calendar"},
    {title: "Cards", active: false, icon: "credit-card"},
    {title: "Countdown", active: false, icon: "clock"},
    {title: "Darkmode", active: false, icon: "sunrise"},
    {title: "Form", active: false, icon: "database"},
    {title: "Video", active: false, icon: "video"},
    {title: "Sidebar", active: false, icon: "sidebar"},
  ];
</script>

<main>
  <sidebar>
    <top><h1>CSS Only</h1></top>

    <items>
      {#each menu as item}
        <a data-testid="sidebar-link-{ item.title }"
           class:with-icon={ item.icon !== undefined }
           class:without-icon={ !item.icon}
           class:active={ item.active }
           href="/client/#/bando/components/SidebarCSS/">
          {#if item.icon}
          <Icon size="24" name={ item.icon } light={ item.active } /> <span class="with-icon">{ item.title }</span>
          {:else}
            <span class="without-icon">{ item.title }</span>
          {/if}
        </a>
      {/each}
    </items>
  </sidebar>
</main>
