src/lib/components/sidebar/Sidebar.svelte

<script lang="ts">
  import Icon from "@iconify/svelte"
	import Menu from "./Menu.svelte";

  const menus = [{
    icon: "solar:gallery-bold-duotone",
    label: "Gallery",
    href: "/",
  }, {
    icon: "uim:cube",
    label: "Models",
    href: "/models",
  }, {
    icon: "fluent:glance-horizontal-sparkles-16-filled",
    label: "Generate",
    href: "/generate",
  }]
</script>

<aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px]">
  <header class="text-white px-8 pb-8 pt-10 text-xl tracking-wider font-semibold">
    LoRA Studio
  </header>
  <div class="px-4">
    <ul class="grid grid-cols-1 gap-2">
      {#each menus as menu}
        <Menu href={menu.href}>
          <Icon icon={menu.icon} class="w-5 h-5" />
          {menu.label}
        </Menu>
        
      {/each}
    </ul>
    <hr class="border-neutral-800/50 mt-10 mx-4">
    <Menu href="https://huggingface.co/">
      <Icon icon="ph:question-fill" class="w-5 h-5" />
      Help
    </Menu>
  </div>
</aside>