harmony-app-layout-pattern

Review fetch https://storybook-harmony.ofp-elr.optum.com/?path=/docs/patterns-app-layout-pattern--docs&e2e=1&globals=viewport:mastheadSidebar275

Overview

The App Layout Pattern is the recommended application-shell pattern for Harmony. It is a composition pattern — there is no single wrapper component. Instead, teams compose four Harmony primitives (Masthead, ViewManager, Sidebar, DetailPane) into a responsive shell that provides consistent navigation, page content, and supporting workflows.

All variants share a sticky Masthead at the top (with hamburger menu, client/product switchers, notifications, user menu, and support menu). They differ in how left navigation and supplementary content are handled.

Template Variants

Default (./templates/default.tsx)

Use when: Your application has a deep, hierarchical navigation structure (categories with nested subcategories) and needs a collapsible tree-style left panel alongside main body content.

Components: Masthead + ViewManager (with header, search, and tree body slots) + main content area + DetailPane

Best for: Data-heavy enterprise apps such as claims management, case management, or admin consoles where users navigate a tree of categories (e.g., Groups > Options > Suboptions) and drill into records via a slide-out detail pane.

---

With Sidebar (./templates/sidebar.tsx)

Use when: Your application needs persistent, icon-driven left navigation with compact tiles rather than a full tree. Ideal for apps with a small number of top-level sections that users switch between frequently.

Components: Masthead + Sidebar (icon tiles with optional sub-tiles, collapsible) + main content area + DetailPane

Best for: Clinical or patient-facing apps (e.g., Patient Dashboard, Appointments, Prescriptions, Records) where each section is represented by a recognizable icon and the sidebar can collapse to save horizontal space on smaller screens.

---

Without Left Navigation (./templates/without-left-navigation.tsx)

Use when: Your application does not need persistent left-side navigation but still wants the shared Masthead shell and the ability to launch supporting workflows in a right-side detail pane.

Components: Masthead + main body content (multiple composable card areas) + DetailPane

Best for: Task-focused or single-purpose apps (e.g., a task list, a dashboard with no sub-navigation, or a workflow landing page) where content fills the full width below the masthead and a detail pane is available on demand.

---

Detail Pane Only (./templates/detail-pane-only.tsx)

Use when: Your application needs the Masthead plus a dedicated right-side workflow surface as the primary interaction area, without any left navigation or standard page content region.

Components: Masthead + DetailPane (carries the primary workflow with form controls, steps, and actions)

Best for: Focused configuration or setup workflows (e.g., onboarding wizards, settings panels, or single-record editors) where the detail pane is the main content surface rather than a supplementary slide-out.

Templates

• ./templates/default.tsx
• ./templates/detail-pane-only.tsx
• ./templates/sidebar.tsx
• ./templates/without-left-navigation.tsx