analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 4.37 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/AppLayout/AppLayout.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { MenuItem, MenuOverflow } from '../Menu/Menu';\nimport { PageContainer } from '../PageContainer/PageContainer';\n\nexport interface AppLayoutMenuItem {\n /** Unique value used to compute `activeMenuValue` and dispatch clicks. */\n value: string;\n /** Visible label rendered below the icon. */\n label: string;\n /** Icon shown above the label. */\n icon: ReactNode;\n /**\n * When `false`, the item is hidden (useful for feature flags).\n * Default: `true`.\n */\n visible?: boolean;\n}\n\nexport interface AppLayoutProps {\n /**\n * Header element rendered at the top of the layout.\n * Usually a wrapper around `AppHeader`.\n */\n header: ReactNode;\n /** Items shown in the navigation carousel. */\n menuItems: AppLayoutMenuItem[];\n /** Value of the currently active item. */\n activeMenuValue: string;\n /** Called when the user clicks a menu item; receives the item's `value`. */\n onMenuItemClick: (value: string) => void;\n /**\n * Tailwind class overriding the default `max-w-[1000px]` of the menu.\n * Pass e.g. `max-w-[1150px]` to widen for roles with more items.\n */\n menuMaxWidth?: string;\n /**\n * Tailwind class overriding the default `max-w-[1000px]` of the page content\n * (forwarded to `PageContainer`'s `innerClassName`). Pass e.g.\n * `max-w-[1280px]` to widen the content area. When omitted, the default\n * `max-w-[1000px]` is kept, so other consumers are unaffected.\n */\n contentMaxWidth?: string;\n /** Page content (e.g. `<Outlet />`). */\n children: ReactNode;\n /**\n * Optional slot rendered at the very end of the layout (after the page\n * content). Use for floating widgets like `<ZendeskWidget />`.\n */\n bottomSlot?: ReactNode;\n}\n\n/**\n * Shared application layout used by every analytica frontend (aluno, gestor,\n * professor). It composes the header, the responsive navigation carousel\n * (`MenuOverflow` + `MenuItem` variant `menu-overflow-col`) and a\n * `PageContainer` wrapping the page content.\n *\n * Business rules (feature flags, Zendesk handoff, route mapping) live in the\n * consumer — the layout is intentionally agnostic.\n */\nexport const AppLayout = ({\n header,\n menuItems,\n activeMenuValue,\n onMenuItemClick,\n menuMaxWidth,\n contentMaxWidth,\n children,\n bottomSlot,\n}: AppLayoutProps) => {\n const visibleItems = menuItems.filter((item) => item.visible !== false);\n\n return (\n <div\n data-component=\"AppLayout\"\n className=\"w-screen min-h-[100dvh] md:h-[100dvh] bg-secondary-50 flex flex-col items-center overflow-x-hidden md:overflow-hidden\"\n >\n {header}\n <div className=\"z-10 w-full flex flex-col items-center bg-background shadow-soft-shadow-1\">\n <MenuOverflow\n value={activeMenuValue}\n defaultValue=\"\"\n className={menuMaxWidth ?? 'max-w-[1000px]'}\n onValueChange={onMenuItemClick}\n >\n {visibleItems.map((item) => (\n <MenuItem\n key={item.value}\n variant=\"menu-overflow-col\"\n value={item.value}\n >\n {item.icon}\n {item.label}\n </MenuItem>\n ))}\n </MenuOverflow>\n </div>\n <div className=\"md:[height:calc(100dvh-120px)] md:overflow-auto w-full\">\n <PageContainer innerClassName={contentMaxWidth}>\n {children}\n </PageContainer>\n </div>\n {bottomSlot}\n </div>\n );\n};\n\nexport default AppLayout;\n"],"mappings":";;;;;;;;;AAgFQ,cAOI,YAPJ;AAnBD,IAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,eAAe,UAAU,OAAO,CAAC,SAAS,KAAK,YAAY,KAAK;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,kBAAe;AAAA,MACf,WAAU;AAAA,MAET;AAAA;AAAA,QACD,oBAAC,SAAI,WAAU,6EACb;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,cAAa;AAAA,YACb,WAAW,gBAAgB;AAAA,YAC3B,eAAe;AAAA,YAEd,uBAAa,IAAI,CAAC,SACjB;AAAA,cAAC;AAAA;AAAA,gBAEC,SAAQ;AAAA,gBACR,OAAO,KAAK;AAAA,gBAEX;AAAA,uBAAK;AAAA,kBACL,KAAK;AAAA;AAAA;AAAA,cALD,KAAK;AAAA,YAMZ,CACD;AAAA;AAAA,QACH,GACF;AAAA,QACA,oBAAC,SAAI,WAAU,0DACb,8BAAC,iBAAc,gBAAgB,iBAC5B,UACH,GACF;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}