responsive menu

src/lib/components/ProTag.svelte

@@ -1,3 +1,3 @@
-<div class="inline-block -skew-x-12 bg-gradient-to-br text-sm font-bold shadow-lg from-pink-500 via-green-500 to-yellow-500 text-black shadow-green-500/20 rounded-lg px-2.5 py-0.5">
+<div class="inline-block -skew-x-12 bg-gradient-to-br text-sm font-bold shadow-lg from-pink-500 via-green-500 to-yellow-500 text-black shadow-green-500/20 rounded-lg px-1.5 xl:px-2.5 py-0.5">
   PRO
 </div>

src/lib/components/sidebar/Sidebar.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Icon from '@iconify/svelte';
 	
 	import logo from '$lib/images/hf-logo.svg';
@@ -7,45 +7,64 @@
 	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",
-  },
-];
+		{
+			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/chat",
-    label: "Chat",
-    icon: "ph:chat-dots-fill",
-  },
-];
+	const FEW_SHOTS = [
+		{
+			path: "/text-generation/translation",
+			label: "Translation",
+			icon: "bi:translate",
+		},
+		{
+			path: "/text-generation/chat",
+			label: "Chat",
+			icon: "ph:chat-dots-fill",
+		},
+	];
+
+	let open: boolean = false;
 
 </script>
 
-<aside class="hidden xl:block bg-slate-900 w-full max-w-[360px] h-screen border-r border-slate-800 text-white">
-	<header class="flex items-center justify-start p-8 gap-4">
-		<img src={logo} alt="Logo" width={34} height={34} />
+<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-xl">Inference API for</p>
+			<p class="text-white font-bold text-lg">Inference API for</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-[360px] h-screen border-r border-slate-800 text-white`}>
+	<header class="flex items-center justify-between p-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">Inference API for</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"

src/lib/utils/clickOutside.js

@@ -0,0 +1,17 @@
+export function clickOutside(node) {
+	
+	window.addEventListener('click', handleClick);
+	
+	function handleClick(e){   
+  if (!node.contains(e.target)){
+    node.dispatchEvent(new CustomEvent('outsideclick'))
+  }
+}
+
+	return {
+		destroy() {
+			// the node has been removed from the DOM
+			window.removeEventListener('click', handleClick)
+		}
+	};
+} 

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import '$lib/styles/tailwind.css';
 </script>
 
-<div class="app flex items-start justify-start overflow-auto h-screen lg:h-auto lg:overflow-hidden">
+<div class="app flex xl:flex-row flex-col items-start justify-start overflow-y-auto overflow-x-hidden h-screen lg:h-auto lg:overflow-hidden">
 	<Sidebar />
 
 	<slot />