Workspace Layout
A full-page shell for workspace-style applications. Side navigation, sticky page header and footer, a scrollable main card, and an optional push-drawer slot.
The workspace layout owns the page chrome — side menu, sticky page header and footer, and the scrollable main card — so each route can focus on its own content. The variants below show common compositions.
Basic workspace layout
Side menu plus sticky page header and footer wrap a scrollable text content area. The simplest shell for a workspace page.
Bulk action bar
A long table inside the workspace card scrolls under a sticky page header that carries a bulk action toolbar. The footer surfaces a selection summary that stays visible as users move through the list.
Reacting to scroll state
Read the layout’s scroll state from useGoabWorkspaceLayoutScrollState() (React) or GoabWorkspaceLayoutScrollStateService (Angular) to drive consumer-side reactivity — for example, collapse a header title or show a back-to-top button once content has scrolled past the top.
With push drawer
The optional pushDrawer slot accepts a GoabPushDrawer that pushes only the main card, not the side menu. Use it for filters, reference content, or short forms that should live alongside the page without overlaying it.
When to use
Use the workspace layout when:
- Building a workspace-style application such as a case management tool, internal dashboard, or back-office app
- The page needs persistent side navigation alongside the main content
- Users will scroll through long content while header and footer actions stay accessible
- Multiple routes share the same shell — the layout owns the chrome and each route owns its content
Considerations
- The layout fills the viewport (100vh). Host it directly inside the router outlet, not inside another scrolling container.
- Sticky page header and page footer cast a soft scroll shadow when content scrolls past them, signalling there is more content beyond the sticky edge.
- The push-drawer slot is a sibling of the main card. Opening the drawer narrows the card but leaves the side menu in place — appropriate when the drawer is contextual to the current page.
- The current scroll state (no-scroll, at-top, middle, at-bottom) is exposed via
useGoabWorkspaceLayoutScrollState()(React) andGoabWorkspaceLayoutScrollStateService(Angular) when consumers need to react to scroll position. - These examples use placeholder elements for page header / footer rather than real
GoabAppHeader/GoabAppFooterso the focus stays on the workspace-layout structure itself.