footer aside signin

src/lib/components/sidebar/Sidebar.svelte

@@ -2,6 +2,7 @@
   import Icon from "@iconify/svelte"
 
 	import Menu from "./Menu.svelte";
+  import HFLogo from "$lib/assets/hf-logo.svg";
 
   let isOpen = false;
 
@@ -31,24 +32,30 @@
 <button class="bg-transparent absolute top-10 right-8 cursor-pointer lg:hidden" on:click="{handleClick}">
   <Icon icon="{isOpen ? "mdi:hamburger-remove" : "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 lg: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>
+<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 lg:z-0 flex flex-col justify-between" class:translate-x-0={isOpen}>
+  <div class="w-full">
+    <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>
   </div>
+  <footer class="text-white text-center text-base pb-8 px-8 flex items-center justify-center gap-2 cursor-pointer">
+    <img src={HFLogo} alt="Hugging Face logo" class="w-8 h-8 inline-block" />
+    <u>Sign in with Hugging Face</u>
+  </footer>
 </aside>

src/routes/+layout.svelte

@@ -5,7 +5,7 @@
 
 <div class="flex items-start">
 	<Sidebar />
-	<main id="app" class="px-6 py-10 lg:px-10 lg:py-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-y-auto">
 		<slot />
 	</main>
 </div>