Template — Layouts separados
Un buen MVP distingue entre la experiencia de pre-login (marketing, auth) y la de post-login (app). Mezclar ambas en un único layout es caos. El template separa en dos: `+layout.svelte` raíz para público, `app/+layout.svelte` para autenticado con sidebar.
Dos layouts: público (simple) y app (con navegación persistente).
La estructura
`
src/routes/
+layout.svelte ← raíz, público (landing, login, signup)
app/
+layout.svelte ← app, protegida, sidebar colapsable
dashboard/+page.svelte
settings/+page.svelte
`
Qué incluye el layout de app
- Sidebar colapsable: navegación principal + accesos rápidos.
- Topbar: breadcrumbs + user menu + notificaciones.
- Slot central: contenido de la página.
- Store de UI:
$stores/ui.tsconsidebarCollapsedpersistente en localStorage.
Por qué separar importa
En el layout público, el usuario está decidiendo si quedarse. Todo es marketing: copy, pricing, testimonios. En el layout de app, ya decidió — quiere hacer su trabajo. Cada pixel debe servir al workflow, no al convencimiento.
Mezclar = app que se siente como landing, o landing que se siente como app. Ambas pierden.
Describe en 2 líneas: ¿cómo se ve tu navbar pre-login vs. post-login? Si son iguales, pierdes contexto para ambos usuarios.
- Dos layouts: raíz público, `app/` protegido.
- App layout tiene sidebar colapsable persistido en localStorage.
- Separar evita que app sienta marketing, y viceversa.