responsive stuffs

src/lib/components/Button.svelte

@@ -25,7 +25,15 @@ import { goto } from '$app/navigation';
 
 </script>
 
-<button on:click={handleClick} class="button {theme} {size} relative whitespace-nowrap" class:!bg-neutral-400={loading} class:!border-neutral-400={loading}>
+<button
+  class="button {theme} {size} relative whitespace-nowrap {disabled ? 'disabled' : ''}"
+  class:!bg-neutral-400={loading}
+  class:!border-neutral-400={loading}
+  class:!grayscale={disabled}
+  class:!cursor-not-allowed={disabled}
+  class:!text-neutral-700={disabled}
+  on:click={handleClick}
+  >
   {#if icon && iconPosition === "left"}
     <p class:opacity-0={loading}>
       <Icon icon={icon} class="w-[20px] h-[20px]" />
@@ -68,5 +76,10 @@ import { goto } from '$app/navigation';
     &:hover {
       @apply brightness-125
     }
+    &.disabled {
+      &:hover {
+        @apply brightness-100
+      }
+    }
   }
 </style>

src/lib/components/generate/Banner.svelte

@@ -4,7 +4,7 @@
 	import Button from "$lib/components/Button.svelte";
 </script>
 
-<div class="w-full rounded-xl mb-8 relative p-6 xl:p-8 flex flex-col xl:flex-row items-start xl:items-center justify-between gap-4 ring-4 ring-white/20">
+<div class="w-full rounded-xl relative p-6 xl:p-8 flex flex-col xl:flex-row items-start xl:items-center justify-between gap-4 ring-4 ring-white/20">
   <div
     class="bg-cover bg-center brightness-75 absolute left-0 top-0 h-full w-full rounded-xl"
     style={`

src/lib/components/generate/Response.svelte

@@ -33,7 +33,7 @@
 
 </script>
 
-<div class="w-full border-l border-neutral-800 h-full col-span-2" class:!border-black={!response}>
+<div class="w-full border-t xl:border-t-0 xl:border-l border-neutral-800 h-full col-span-5 xl:col-span-2" class:!border-black={!response}>
   {#if response}
     {#if typeof response === "string"}
       <img src={response} alt="Generation" class="w-full mx-auto object-contain" />

src/lib/components/sidebar/Sidebar.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <button class="bg-transparent absolute top-10 right-8 cursor-pointer xl:hidden" on:click="{handleClick}">
-  <Icon icon="{isOpen ? "mdi:hamburger-remove" : "mdi:hamburger-plus"}" class="w-7 h-7 text-white" />
+  <Icon icon="{isOpen ? "mdi:hamburger-remove" : "mdi:hamburger-plus"}" class="w-7 h-7 text-white relative z-10" />
 </button>
 <aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px] absolute -translate-x-full xl:translate-x-0 transition-all duration-200 xl:relative z-20 xl:z-0 flex flex-col justify-between" class:translate-x-0={isOpen}>
   <div class="w-full">

src/routes/+page.svelte

@@ -9,7 +9,7 @@
 	import GoTop from "$lib/components/GoTop.svelte";
 	import Dialog from "$lib/components/dialog/Dialog.svelte";
 	import SubmitModel from "$lib/components/models/Submit.svelte";
-	import UserIsLogged from "$lib/components/UserIsLogged.svelte";
+	// import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
 	export let data
 
@@ -61,29 +61,31 @@
 		<Radio options={MODELS_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
 		<div class="items-center justify-end gap-5 hidden lg:flex">
 			<Button href="https://huggingface.co/new/stable-diffusion-lora" target="_blank" icon="ic:round-plus" theme="dark" size="lg">Create</Button>
-			<UserIsLogged>
+			<!-- <UserIsLogged> -->
 				<Button
 					icon="octicon:upload-16"
 					theme="blue"
 					size="lg"
+					disabled={true}
 					onClick={() => submitModelDialog = true}
 				>
 					Upload model
 				</Button>
-			</UserIsLogged>
+			<!-- </UserIsLogged> -->
 		</div>
 		<div class="items-center justify-end gap-3 flex lg:hidden">
 			<Button href="https://huggingface.co/new/stable-diffusion-lora" target="_blank" icon="ic:round-plus" theme="dark" size="md">Create</Button>
-			<UserIsLogged>
+			<!-- <UserIsLogged> -->
 				<Button
 					icon="octicon:upload-16"
 					theme="blue"
 					size="md"
+					disabled={true}
 					onClick={() => submitModelDialog = true}
 				>
 					Upload model
 				</Button>
-			</UserIsLogged>
+			<!-- </UserIsLogged> -->
 		</div>
 	</div>
 	<div class="mt-5 max-w-sm">

src/routes/gallery/+page.svelte

@@ -8,7 +8,7 @@
 	import Radio from "$lib/components/fields/Radio.svelte";
 	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
 	import GoTop from "$lib/components/GoTop.svelte";
-	import UserIsLogged from "$lib/components/UserIsLogged.svelte";
+	// import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
 	export let data
 
@@ -55,15 +55,15 @@
 	<div class="flex items-center justify-between mt-5">
 		<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
 		<div class="items-center justify-end gap-5 hidden lg:flex">
-			<UserIsLogged>
-				<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
-			</UserIsLogged>
+			<!-- <UserIsLogged> -->
+			<Button icon="ic:round-plus" disabled={true} theme="dark" size="lg">Upload own Image</Button>
+			<!-- </UserIsLogged> -->
 			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
 		</div>
 		<div class="items-center justify-end gap-3 flex lg:hidden">
-			<UserIsLogged>
-				<Button icon="ic:round-plus" theme="dark" size="md">Upload own Image</Button>
-			</UserIsLogged>
+			<!-- <UserIsLogged> -->
+			<Button icon="ic:round-plus" disabled={true} theme="dark" size="md">Upload own Image</Button>
+			<!-- </UserIsLogged> -->
 			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="md">Generate</Button>
 		</div>
 	</div>

src/routes/generate/+page.svelte

@@ -54,12 +54,14 @@
 	}
 </script>
 
-<main class="grid grid-cols-5 w-full h-full gap-10">
-	<div class="w-full px-6 py-10 lg:px-10 lg:py-12 col-span-3">
-		<Banner />
-		<h1 class="text-white font-semibold text-2xl">
-			Start generating
-		</h1>
+<main class="grid grid-cols-5 w-full h-full gap-5 xl:gap-10">
+	<div class="w-full px-6 py-10 lg:px-10 lg:py-12 col-span-5 xl:col-span-3">
+		<div class="w-full flex gap-8 flex-col-reverse xl:flex-col">
+			<Banner />
+			<h1 class="text-white font-semibold text-2xl">
+				Start generating
+			</h1>
+		</div>
 		<div class="mt-5 grid grid-cols-1 gap-6">
 			<div>
 				<p class="text-neutral-300 mb-2.5 text-base">Models</p>