src/lib/components/sidebar/Sidebar.svelte

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

	import Menu from "./Menu.svelte";

  let isOpen = false;

  const handleClick = () => {
    const app = document.getElementById("app");
    if (!app) return;
  
    app.classList[isOpen ? 'remove' : 'add']("overflow-hidden");
    isOpen = !isOpen;
  }

  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>

<button class="bg-transparent absolute top-10 right-8 cursor-pointer" on:click="{handleClick}">
  <Icon icon="mdi:hamburger-minus" class="w-7 h-7 text-white" />
</button>
<aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px] absolute -translate-x-full lg:translate-x-0 transition-all duration-200 lg:relative z-20" class:translate-x-0={isOpen}>
  <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>