feat: enhance login page design and functionality by integrating new components, updating styles, and improving user experience

2025-12-13 19:12:08 -03:00
parent 0404edd0ba
commit d2c0636179
11 changed files with 300 additions and 105 deletions
--- a/apps/web/src/lib/components/MenuToggleIcon.svelte
+++ b/apps/web/src/lib/components/MenuToggleIcon.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { prefersReducedMotion, Spring } from 'svelte/motion';
+
+	interface Props {
+		open: boolean;
+		class?: string;
+		stroke?: number;
+	}
+
+	let { open, class: className = '', stroke = 2 }: Props = $props();
+
+	const progress = Spring.of(() => (open ? 1 : 0), {
+		stiffness: 0.25,
+		damping: 0.65,
+		precision: 0.001
+	});
+
+	const clamp01 = (n: number) => Math.max(0, Math.min(1, n));
+	const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+	let t = $derived(prefersReducedMotion.current ? (open ? 1 : 0) : progress.current);
+	let tFast = $derived(clamp01(t * 1.15));
+
+	// Fechado: hambúrguer. Aberto: "outro menu" (linhas deslocadas + comprimentos diferentes).
+	// Continua sendo ícone de menu (não vira X).
+	let topY = $derived(lerp(-6, -7, tFast));
+	let botY = $derived(lerp(6, 7, tFast));
+
+	let topX = $derived(lerp(0, 3.25, t));
+	let midX = $derived(lerp(0, -2.75, t));
+	let botX = $derived(lerp(0, 1.75, t));
+
+	// micro-inclinação só pra dar “vida”, sem cruzar em X
+	let topR = $derived(lerp(0, 2.5, tFast));
+	let botR = $derived(lerp(0, -2.5, tFast));
+
+	let topScaleX = $derived(lerp(1, 0.62, tFast));
+	let midScaleX = $derived(lerp(1, 0.92, tFast));
+	let botScaleX = $derived(lerp(1, 0.72, tFast));
+
+	let topOpacity = $derived(1);
+	let midOpacity = $derived(1);
+	let botOpacity = $derived(1);
+</script>
+
+<span class="menu-toggle-icon {className}" aria-hidden="true" style="--stroke: {stroke}px">
+	<span
+		class="line"
+		style="--x: {topX}px; --y: {topY}px; --r: {topR}deg; --o: {topOpacity}; --sx: {topScaleX}"
+	></span>
+	<span
+		class="line"
+		style="--x: {midX}px; --y: 0px; --r: 0deg; --o: {midOpacity}; --sx: {midScaleX}"
+	></span>
+	<span
+		class="line"
+		style="--x: {botX}px; --y: {botY}px; --r: {botR}deg; --o: {botOpacity}; --sx: {botScaleX}"
+	></span>
+</span>
+
+<style>
+	.menu-toggle-icon {
+		position: relative;
+		display: inline-block;
+		width: 1.25rem;
+		height: 1.25rem;
+		color: currentColor;
+	}
+
+	.line {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50%;
+		margin-top: calc(var(--stroke) / -2);
+		height: var(--stroke);
+		border-radius: 9999px;
+		background: currentColor;
+		opacity: var(--o, 1);
+		transform-origin: center;
+		transform: translateX(var(--x, 0px)) translateY(var(--y, 0px)) rotate(var(--r, 0deg))
+			scaleX(var(--sx, 1));
+		will-change: transform, opacity;
+	}
+</style>