sidebar icon aligned

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-1.5 xl:px-2.5 py-0.5">
+<div class="inline-block -skew-x-12 bg-gradient-to-br text-xs 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-1.5 py-0.5">
   PRO
 </div>

src/lib/components/sidebar/Sidebar.svelte

@@ -44,7 +44,7 @@
 	<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 for</p>
+			<p class="text-white font-bold text-lg">Inference API Playground</p>
 			<ProTag />
 		</div>
 	</header>
@@ -52,12 +52,12 @@
 		<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-6 lg:p-8 gap-4">
+<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 p-6 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>
+				<p class="text-white font-bold text-xl whitespace-nowrap">Inference API Playground</p>
 				<ProTag />
 			</div>
 		</div>
@@ -66,7 +66,7 @@
 		</button>
 	</header>
 	<nav class="grid grid-cols-1 gap-8 px-4">
-		<a
+		<!-- <a
 			href="https://huggingface.co/pricing#pro"
 			target="_blank"
 			class="px-4"
@@ -74,7 +74,7 @@
 			<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>
+		</a> -->
 		<ul class="grid grid-cols-1 gap-4">
 			{#each LINKS as { path, description, label, type, icon }, i}
 				<PrimaryLink href={path} type={type}>
@@ -91,7 +91,7 @@
 				</PrimaryLink>
 				{/each}
 		</ul>
-		<div class="grid grid-cols-1 gap-4">
+		<!-- <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
@@ -106,7 +106,7 @@
 					</p>
 				</SecondaryLink>
 				{/each}
-		</div>
+		</div> -->
 	</nav>
 </aside>