fn-design-system/components/app_shell.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, framework, props, output, tested, tests, test_file_path, file_path, emits, has_state, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	framework	props	output	tested	tests	test_file_path	file_path	emits	has_state	variant
app_shell	component	ts	ui	1.0.0	impure	FnAppShell(props: FnAppShellProps): JSX.Element	Layout shell con header, navbar colapsable y area principal. Wrapper sobre Mantine AppShell.	mantine layout shell navigation component ui				false		@mantine/core	react	name type required description header ReactNode false Contenido del header superior name type required description navbar ReactNode false Contenido del sidebar de navegacion name type required description navbarWidth number false Ancho del navbar en px, default 250 name type required description navbarCollapsed boolean false Si el navbar esta colapsado name type required description children ReactNode true Contenido principal del area main	Layout de aplicacion con header fijo, sidebar colapsable y area de contenido principal	false			frontend/functions/ui/app_shell.tsx		false

Ejemplo

import { FnAppShell } from '@fn_library'

<FnAppShell
  header={<Group px="md">Logo</Group>}
  navbar={<NavLinks />}
  navbarCollapsed={collapsed}
>
  <MainContent />
</FnAppShell>

Notas

Wrapper sobre Mantine AppShell. El header tiene altura fija de 60px. El navbar colapsa tanto en mobile como en desktop cuando navbarCollapsed es true. El breakpoint de responsive es sm.