PushAsideWithDrawer

When to use

Report or detail panels that push main content aside (not overlay-only). Respects shell header via topOffset.

When NOT to use

Modal dialogs — use Podium Dialog. Temporary overlay drawers — use Podium Drawer directly.

Podium primitives composed

• Podium Drawer

Common pitfalls

• Default topOffset matches shell header (64px) — pass 0 on login pages.
• Controlled open + onOpenChange required.

Props

Auto-generated from src/components/PushAsideWithDrawer/PushAsideWithDrawer.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

PushAsideWithDrawerProps

Prop	Type	Required	Description
children	ReactNode	Yes	—
drawer	ReactNode	Yes	Panel body inside .
drawerLabel	string	Yes	Visible + accessibility title (rendered as visually hidden DrawerTitle for Radix).
drawerShadow	boolean	No	Podium applies shadow on pds-drawer--persistent (hideOverlay). Set false to flatten the panel edge (e.g. report drawer). Default: true
drawerWidth	number	No	Panel width in px. Default: 400
onOpenChange	(open: boolean) => void	No	—
open	boolean	Yes	—
side	'left' | 'right'	No	—
topOffset	number	No	Inset the drawer panel from the top (e.g. below a fixed app header). Sets top and height on DrawerContent to topOffset and calc(100vh - topOffset). Defaults to so panels sit flush below the fixed header without any extra config. Pass 0 only when rendering without the header (e.g. login pages). Default: SHELL_HEADER_HEIGHT (64)
zIndex	number	No	Stacking above host shell; matches legacy push panels. Default: 1200

Examples

Report drawer

import { PushAsideWithDrawer } from '@nike/whisker-component-library';

<PushAsideWithDrawer
  open={open}
  onOpenChange={setOpen}
  drawerLabel="Sales report"
  drawer={<ReportPanel />}
  drawerShadow={false}
>
  <MainDashboard />
</PushAsideWithDrawer>;