Skip to content

Commit 15afa45

Browse files
feat(data-app-shell): add collapsible nav rail (navRailHidden)
Add a `navRailHidden` prop to DataAppShell. When true, the desktop icon nav rail is not rendered, so collapsing the sidebar panel can hide both the rail and the panel, giving the content full width. Wired in the Default story to the panel's collapsed state, with a play-test asserting the rail is hidden when collapsed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent ca66967 commit 15afa45

2 files changed

Lines changed: 12 additions & 2 deletions

File tree

src/components/composed/DataAppShell/DataAppShell.stories.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -435,6 +435,7 @@ const DefaultShell = ({ initialCollapsed = false }: { initialCollapsed?: boolean
435435
</Button>
436436
</>
437437
}
438+
navRailHidden={collapsed}
438439
sidebarPanel={<WorkflowPanel steps={steps} collapsed={collapsed} onCollapseChange={setCollapsed} />}
439440
>
440441
<div className="flex items-center justify-center h-full">
@@ -488,6 +489,12 @@ export const CollapsedWorkflow: Story = {
488489
expect(canvas.queryByText("Global Filtering")).not.toBeInTheDocument();
489490
expect(canvas.queryByText("Workflow")).not.toBeInTheDocument();
490491
});
492+
493+
await step("Collapsed workflow — app nav rail is hidden", async () => {
494+
expect(
495+
canvasElement.querySelector("[data-slot='data-app-sidebar-rail']")
496+
).not.toBeInTheDocument();
497+
});
491498
},
492499
parameters: {
493500
zephyr: { testCaseId: "SW-T4666" },

src/components/composed/DataAppShell/DataAppShell.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,8 @@ export interface DataAppShellProps {
104104
// -- Shell --
105105
/** Slot rendered between the icon rail and the content (e.g. WorkflowPanel) */
106106
sidebarPanel?: React.ReactNode;
107+
/** Hide the desktop icon nav rail (e.g. when the sidebar panel is collapsed) */
108+
navRailHidden?: boolean;
107109
/** Main content area */
108110
children: React.ReactNode;
109111
/** Additional className for the root container */
@@ -492,6 +494,7 @@ function DataAppShell({
492494
onHelpClick,
493495
headerActions,
494496
sidebarPanel,
497+
navRailHidden = false,
495498
children,
496499
className,
497500
}: DataAppShellProps) {
@@ -515,8 +518,8 @@ function DataAppShell({
515518
data-slot="data-app-shell"
516519
className={cn("flex flex-row w-full h-screen overflow-hidden", className)}
517520
>
518-
{/* Desktop icon rail (hidden on mobile) */}
519-
<IconRailSidebar {...sidebarProps} />
521+
{/* Desktop icon rail (hidden on mobile, or when navRailHidden) */}
522+
{!navRailHidden && <IconRailSidebar {...sidebarProps} />}
520523

521524
{/* Mobile sidebar Sheet */}
522525
<SheetContent

0 commit comments

Comments
 (0)