# Drawer Layout

Pages may now use a drawer style navigation rather than the default card grid. The layout is controlled by the `layout_type` column on the `page_configs` table.

| `layout_type` | Description |
|---------------|-------------|
| `grid`        | Default dashboard grid where each card opens a modal |
| `drawer`      | Renders a left menu and loads modules on the right |

When a page has `layout_type` set to `drawer`, the dashboard mounts a DaisyUI drawer component. The values from the page's `cards` JSON become a menu on the left. Clicking a menu item loads the referenced modal into `#moduleArea` using `ModuleLoader`. The first modal in the list is loaded automatically when the page is opened.

Add or update a record in `page_configs` with `layout_type: 'drawer'` to enable this behaviour.

## Header and Footer Containers

Drawer pages inject each modal's header and footer into dedicated elements so
content scrolls independently of the menu. The page markup includes:

```html
<header id="moduleHeader"></header>
<div id="moduleArea"></div>
<footer id="moduleFooter"></footer>
```

When a menu item is selected, `ModuleLoader` fetches the modal definition and
`ModalBuilder` renders its `header`, `body` and `footer` sections into these
containers. Any `.modal-close-btn` generated by `ModalBuilder` is removed so
only the drawer menu controls navigation.