# `PhiaUi.Components.Layout.PageLayout`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/page_layout.ex#L1)

Full-page layout composition: header / pane (sidebar) / main / footer slots.

Renders as a `flex flex-col min-h-screen` outer container. The header and
footer are optional; if omitted those slots are simply not rendered. The
pane (sidebar) can be positioned at `:start` (left) or `:end` (right).

When `collapsible` is enabled (default), the pane is hidden below the `md`
breakpoint and the layout stacks vertically on small screens.

## Examples

    <.page_layout>
      <:header>
        <header class="h-16 border-b px-4 flex items-center">Logo</header>
      </:header>
      <:pane>
        <nav class="p-4">Sidebar nav</nav>
      </:pane>
      <div class="p-6">
        <h1>Main content</h1>
      </div>
    </.page_layout>

    <%!-- Right pane --%>
    <.page_layout pane_position={:end} pane_width={:md}>
      <:pane><aside>Details panel</aside></:pane>
      <div>Content</div>
    </.page_layout>

    <%!-- Non-collapsible: pane always visible --%>
    <.page_layout collapsible={false}>
      <:pane><nav>Always visible nav</nav></:pane>
      <div>Content</div>
    </.page_layout>

# `page_layout`

Renders a full-page layout with optional header, pane, and footer.
## Attributes

* `pane_position` (`:atom`) - Sidebar position: `:start` (left) or `:end` (right). Defaults to `:start`. Must be one of `:start`, or `:end`.
* `pane_width` (`:atom`) - Fixed width of the pane. Defaults to `:sm`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.
* `padding` (`:atom`) - Inner padding applied to the main content area. Defaults to `:normal`. Must be one of `:none`, `:condensed`, or `:normal`.
* `collapsible` (`:boolean`) - When true, hides the pane below the `md` breakpoint and stacks vertically. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `header` - Optional top bar (full width, above the pane+main row).
* `pane` - Optional sidebar/secondary panel.
* `footer` - Optional bottom bar (full width, below the pane+main row).
* `inner_block` (required) - Main content area.

---

*Consult [api-reference.md](api-reference.md) for complete listing*