src/lib/components/sidebar/Sidebar.svelte

<script lang="ts">
  import cookies from 'js-cookie';
  import Icon from "@iconify/svelte"
	import { page } from '$app/stores';

  import { userStore, openWindowLogin } from "$lib/stores/use-user";
	import { SIDEBAR_MENUS } from "$lib/utils";

	import Menu from "./Menu.svelte";
	import { browser } from '$app/environment';
	import { galleryStore } from '$lib/stores/use-gallery';

  let isOpen = false;

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

  const logout = async () => {
    cookies.remove("hf_access_token");
    window.location.href = "/";
  }

  if (browser) {
    page.subscribe((value) => {
      if (isOpen) {
        handleClick();
        galleryStore.update((value) => {
          return {
            ...value,
            open: false,
          };
        });
      }
    });
  }
</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 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">
    <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 SIDEBAR_MENUS as menu}
          <Menu href={menu.href}>
            <Icon icon={menu.icon} class="w-5 h-5" />
            {menu.label}
          </Menu>
        {/each}
        {#if $userStore?.sub}
          <Menu href="/saved-generations">
            <Icon icon="mdi:heart" class="w-5 h-5" />
            Saved generations
          </Menu>
        {/if}
      </ul>
      <hr class="border-neutral-800/50 my-10 mx-4">
      <ul class="grid grid-cols-1">
        <Menu href="https://huggingface.co/spaces/enzostvs/loras-studio/discussions/2" target="_blank">
          <Icon icon="ph:question-fill" class="w-5 h-5" />
          Help
        </Menu>
        <Menu href="https://huggingface.co/spaces/enzostvs/loras-studio/discussions/1" target="_blank" colorful={true}>
          <Icon icon="ooui:feedback-ltr" class="w-5 h-5" />
          Feedback
        </Menu>
      </ul>
    </div>
  </div>
  {#if $userStore?.picture}
    <footer class="text-white text-center text-base pb-8 px-8 flex items-center justify-between gap-4">
      <div class="flex items-center justify-start gap-4">
        <img src={$userStore?.picture?.startsWith('http') ? $userStore?.picture : `https://huggingface.co${$userStore?.picture}`} alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white inline-block" />
        <div class="w-full text-left">
          <p class="text-lg font-semibold truncate">
            {$userStore.name}
            </p>
            <div class="flex items-center justify-start gap-1">
              <p class="text-sm leading-none text-neutral-400">{$userStore.preferred_username}</p>
              {#if $userStore?.is_admin}
              <span class="text-yellow-400 bg-yellow-500 bg-opacity-20 rounded-lg px-2 py-0 text-[10px] font-medium inline-block whitespace-nowrap">HF Staff</span>
            {/if}
            </div>
        </div>
      </div>
      <button on:click={logout}>
        <Icon icon="solar:logout-2-bold" class="text-red-500 hover:text-red-400 w-7 h-7" />
      </button>
    </footer>
  {:else}
    <button
      class="text-white text-center text-base pb-8 px-8 flex items-center justify-center gap-2 cursor-pointer"
      on:click={openWindowLogin}  
    >
      <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg.svg" alt="Hugging Face Sign In" class="w-auto inline-block" />
    </button>
  {/if}
</aside>