Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 1,573 Bytes
e71d24a a382c22 e71d24a a382c22 e71d24a dd7ec11 a382c22 e71d24a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<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 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 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> |