Layout

AppLayout

Main application layout with sidebar, header, and content areas.

Overview

The AppLayout component provides the main structure for your application. It handles the positioning of the sidebar, header, and main content area with support for fixed headers and responsive behavior.

Main content area - dashboard

Props

Prop	Type	Default	Description
`sidebar`	`ReactNode`	-	Sidebar element (rendered on the left)
`header`	`ReactNode`	-	Header element (rendered at the top of main content)
`children`	`ReactNode`	-	Main content area
`fixedHeader`	`boolean`	`true`	Whether the header stays fixed while scrolling

Usage

Basic Structure

The AppLayout is typically used as the root layout for authenticated pages, combining the Sidebar, AppHeader, and page content.

import {
  AppLayout,
  AppHeader,
  Sidebar,
  SidebarItem,
  PageHeader,
} from '@enara-health/ui-react';

const App = () => {
  const sidebar = (
    <Sidebar>
      <SidebarItem icon={<HomeIcon />} label="Dashboard" active />
      <SidebarItem icon={<UsersIcon />} label="Patients" />
      <SidebarItem icon={<SettingsIcon />} label="Settings" />
    </Sidebar>
  );

  const header = (
    <AppHeader
      start={<MenuButton />}
      end={<UserMenu />}
    />
  );

  return (
    <AppLayout sidebar={sidebar} header={header}>
      <PageHeader title="Dashboard" />
      <div>Page content...</div>
    </AppLayout>
  );
};

Without Sidebar

The sidebar is optional - you can use AppLayout with just a header.

<AppLayout header={<AppHeader ... />}>
  <PageHeader title="Public Page" />
  <div>Content without sidebar</div>
</AppLayout>

Scrollable Header

Set fixedHeader={false} to allow the header to scroll with content.

<AppLayout
  sidebar={sidebar}
  header={header}
  fixedHeader={false}
>
  <div>Long scrollable content...</div>
</AppLayout>

Composition

AppLayout is designed to work with these companion components:

Sidebar - Navigation sidebar with collapsible support
AppHeader - Global application header
PageHeader - Page-level title and actions