src/lib/components/sidebar/Sidebar.svelte

<script lang="ts">
	import Icon from '@iconify/svelte';
	
	import logo from '$lib/images/hf-logo.svg';
	import ProTag from '$lib/components/ProTag.svelte';
	import PrimaryLink from '$lib/components/sidebar/links/Primary.svelte';
	import SecondaryLink from '$lib/components/sidebar/links/Secondary.svelte';

	const LINKS = [
		{
			path: "/text-generation",
			label: "Text Generation",
			description: "Generate text from a prompt, using a model of your choice.",
			icon: "heroicons:chat-bubble-left-right-20-solid",
			type: "green",
		},
		{
			path: "/image-generation",
			label: "Image Generation",
			description: "Generate images from a prompt, using a model of your choice.",
			icon: "ph:images-square-fill",
			type: "pink",
		},
	];

	const FEW_SHOTS = [
		{
			path: "/text-generation/translation",
			label: "Translation",
			icon: "bi:translate",
		},
		{
			path: "/text-generation/text-analysis",
			label: "Text Analysis",
			icon: "carbon:phrase-sentiment",
		},
	];

	let open: boolean = false;

</script>

<div class="xl:hidden bg-slate-900 w-full px-8 py-5 border-b border-slate-800 flex items-center justify-between">
	<header class="flex items-center justify-start gap-4">
		<img src={logo} alt="Logo" width={28} height={28} />
		<div class="flex items-center justify-start gap-2">
			<p class="text-white font-bold text-lg">Inference API Playground</p>
			<ProTag />
		</div>
	</header>
	<button on:click={() => open = true}>
		<Icon icon="line-md:menu" class="text-slate-100 w-5 h-5" />
	</button>
</div>
<aside class={`${open ? '' : '-translate-x-full'} z-10 absolute xl:relative transition-all duration-200 xl:!translate-x-0 bg-slate-900 w-full xl:max-w-[370px] h-screen border-r border-slate-800 text-white`}>
	<header class="flex items-center justify-between px-6 pt-6 pb-8 gap-4">
		<div class="flex items-center justify-start gap-4">
			<img src={logo} alt="Logo" width={34} height={34} />
			<div class="flex items-center justify-start gap-2">
				<p class="text-white font-bold text-xl whitespace-nowrap">Inference API Playground</p>
				<ProTag />
			</div>
		</div>
		<button class="xl:hidden" on:click={() => open = false}>
			<Icon icon="tdesign:close" class="text-slate-100 w-6 h-6" />
		</button>
	</header>
	<nav class="grid grid-cols-1 gap-8 px-4">
		<!-- <a
			href="https://huggingface.co/pricing#pro"
			target="_blank"
			class="px-4"
		>
			<button class="group text-base font-bold uppercase tracking-wide bg-white text-slate-950 transition-all duration-200 px-6 py-3 w-full rounded-full relative">
				Subscribe to Pro
			</button>
		</a> -->
		<ul class="grid grid-cols-1 gap-4">
			{#each LINKS as { path, description, label, type, icon }, i}
				<PrimaryLink href={path} type={type}>
					<div class="flex items-center justify-start gap-4">
						<Icon icon={icon} class="w-6 h-6" />
						<p class="font-semibold text-sm uppercase font-code">
							{label}
						</p>
					</div>
					<p class="text-sm mt-2 text-white/90">
						{description ||
							"Generate text from a prompt, using a model of your choice."}
					</p>
				</PrimaryLink>
				{/each}
		</ul>
		<!-- <div class="grid grid-cols-1 gap-4">
			<div class="flex items-center justify-start gap-4 mb-2">
				<p class="text-slate-600 uppercase font-medium text-sm font-sans">
					FEW SHOTS
				</p>
				<div class="w-full flex-1 h-[1px] bg-slate-800" />
			</div>
			{#each FEW_SHOTS as { path, label, icon }, i}
				<SecondaryLink href={path}>
					<Icon icon={icon} class="w-5 h-5" />
					<p class="font-semibold text-sm uppercase font-code">
						{label}
					</p>
				</SecondaryLink>
				{/each}
		</div> -->
	</nav>
</aside>