sidebar mobile wip

src/lib/components/fields/Radio.svelte

@@ -11,7 +11,7 @@
   };
 </script>
 
-<div class="w-full flex items-center justify-start">
+<div class="flex items-center justify-start">
   {#each options as option}
     <button
       class={`transition-all duration-200 rounded-full px-4 py-2.5 flex items-center justify-center gap-2 text-sm ${option.value === value ? "bg-neutral-800/60 text-white" : "text-neutral-400"}`}

src/lib/components/sidebar/Sidebar.svelte

@@ -1,7 +1,18 @@
 <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",
@@ -17,7 +28,10 @@
   }]
 </script>
 
-<aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px]">
+<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>

src/routes/+layout.svelte

@@ -3,9 +3,9 @@
 import "$lib/styles/tailwind.css"
 </script>
 
-<div class="app flex items-start">
+<div class="flex items-start">
 	<Sidebar />
-	<main class="px-10 pt-12 pb-12 flex-1 h-screen overflow-auto">
+	<main id="app" class="px-6 py-10 lg:px-10 lg:py-12 flex-1 h-screen overflow-auto">
 		<slot />
 	</main>
 </div>

src/routes/+page.svelte

@@ -34,7 +34,7 @@
 </h1>
 <div class="flex items-center justify-between mt-5">
 	<Radio options={filter_options} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
-	<div class="flex items-center justify-end gap-5 w-full">
+	<div class="flex items-center justify-end gap-5">
 		<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
 		<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
 	</div>