# Applayout

## Usage

The `AppLayout` component provides structure for applications with slots for header, main content, and footer.

This component serves as the main layout wrapper for entire applications, providing a consistent structure with header, main content area, and footer sections. It uses flexbox to ensure the main content area takes up all available vertical space while keeping the header and footer at their natural heights.

### Typical usage pattern

- Use as the root layout component for single-page applications
- Place `m-app-header` in the header slot for navigation and branding
- Place `m-app-footer` in the footer slot for links and copyright information
- Place main application content (views, pages) in the default slot

The component automatically handles responsive behavior and ensures proper viewport height usage.

### Example

```html
<m-app-layout>
  <m-app-header slot="header">...</m-app-header>
  <m-view>...</m-view>
  <m-app-footer slot="footer">...</m-app-footer>
</m-app-layout>
```