Skip to content
NockerlDesignv2.0.0

Drawer / side panel

In review
Live · web

Edge · mode: set them, then open a drawer from the matching edge

Chat

Drawer opened 0 times · section chat. Esc, the scrim, or Close dismisses it. The island is live.

Code

Section titled “Code”
// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform;
// this is the canonical API the published @dizyx/nockerl-react package exposes.)
// NockerlDrawer + NockerlNavSurface are the SAME component ( · D5): the ONE edge-anchored
// nav / panel surface. OVERLAY mode composes the shipped NockerlOverlay primitive (scrim +
// focus-trap + Esc); INLINE omits it (no scrim; shift the app aside so it stays live) for
// the persistent nav-rail / sidebar role. Nav rows are the real NockerlNavItem primitive.
import { NockerlDrawer, NockerlNavItem, NockerlButton } from '@dizyx/nockerl-react';


export function Workspace({ stage }: { stage: HTMLElement | null }) {
  const [nav, setNav] = useState(false);
  const [inspect, setInspect] = useState(false);
  return (
    <>
      {/* LEFT: an overlay navigation drawer (mobile nav over a scrim) */}
      <NockerlDrawer open={nav} onDismiss={() => setNav(false)} stage={stage} edge="left" mode="overlay" title="Nockerl" subtitle="dizyx workspace">
        <nav aria-label="Primary">
          <NockerlNavItem icon={<ChatIcon />} label="Chat" status="streaming" active onSelect={goChat} />
          <NockerlNavItem icon={<TasksIcon />} label="Tasks" count={{ value: 3 }} onSelect={goTasks} />
          <NockerlNavItem icon={<FilesIcon />} label="Files" onSelect={goFiles} />
        </nav>
      </NockerlDrawer>


      {/* RIGHT: an inline/push inspector drawer (desktop detail pane) */}
      <NockerlDrawer
        open={inspect}
        onDismiss={() => setInspect(false)}
        stage={stage}
        edge="right"
        mode="inline"
        title="Session details"
        footer={<NockerlButton text="Open session" variant="primary" onClick={open} />}
      >
        <SessionInspector session={active} />
      </NockerlDrawer>
    </>
  );
}

Parameters

Section titled “Parameters”
PropTypeDefaultDescription
open *booleanWhether the drawer is presented.
onDismiss *() => voidDismiss handler: scrim tap, Esc, or the close button.
edgeDrawerEdge'left'Which vertical edge the panel is anchored to + slides from.
modeDrawerMode'overlay''overlay' = the drawer role (scrim + focus trap); 'inline' = the persistent nav-rail role (no scrim, app stays live). 'modal' is a deprecated alias of 'overlay'. Default 'overlay'.
title *stringAccessible title shown in the header (carries the dialog/region name).
subtitlestringOptional supporting line under the title.
footerReact.ReactNodeOptional right-aligned action row pinned to the panel footer.
stage *HTMLElement | nullThe contained stage element, which gates rendering so the drawer never escapes it.
children *React.ReactNodePanel body: a nav list (left) or detail content (right).