Responsive design

web-player/src/lib/components/Sidebar.svelte

@@ -75,7 +75,7 @@
 {/snippet}
 
 <aside
-	class="sticky top-0 flex h-screen flex-shrink-0 flex-col gap-7 border-r border-line px-[18px] py-[26px]"
+	class="sticky top-0 hidden h-screen shrink-0 flex-col gap-7 border-r border-line px-4.5 py-6.5 md:flex"
 	style="width:var(--mf-sidebar-w)"
 >
 	<a href="/" class="px-3 text-xl font-extrabold tracking-wide">Musify</a>
@@ -83,11 +83,11 @@
 	<div class="relative flex flex-col gap-7" bind:this={navBox}>
 		<div
 			class="pointer-events-none absolute inset-x-0 z-0 overflow-hidden rounded-control bg-surface-hover {animate
-				? 'transition-[top,height] duration-200 ease-[cubic-bezier(0.4,0,0.2,1)]'
+				? 'transition-[top,height] duration-200 ease-in-out'
 				: ''}"
 			style="top:{pillTop}px; height:{pillHeight}px; opacity:{pillVisible ? 1 : 0}"
 		>
-			<span class="absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent-soft"></span>
+			<span class="absolute inset-y-0 left-0 w-0.75 rounded-r-full bg-accent-soft"></span>
 		</div>
 
 		<nav class="relative z-10 flex flex-col gap-1">
@@ -115,7 +115,7 @@
 						type="submit"
 						class="flex w-full items-center gap-3 px-3 py-2.5 text-base font-semibold text-fg-2 transition hover:bg-hover"
 					>
-						<LogOut class="h-[18px] w-[18px]" strokeWidth={2} />
+						<LogOut class="h-4.5 w-4.5" strokeWidth={2} />
 						Salir
 					</button>
 				</form>
@@ -130,7 +130,7 @@
 				<img src={user.picture} alt="" class="h-9 w-9 rounded-full object-cover" />
 			{:else}
 				<span
-					class="grid h-9 w-9 flex-shrink-0 place-items-center rounded-full bg-surface-2 text-sm font-semibold uppercase"
+					class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-2 text-sm font-semibold uppercase"
 				>
 					{user.name.charAt(0)}
 				</span>