# App Layout Components

A collection of flexible layout components for building application interfaces with headers, sidebars, and resizable panels.

## Available Components

- **SidebarLayout** - Layout with optional sidebar and header
- **HeaderLayout** - Layout with header and optional sidebar below
- **ClassicLayout** - Traditional application layout with header, sidebars, and status bar
- **ColumnsLayout** - Flexible column-based layout with resizable panels
- **RowsLayout** - Flexible row-based layout with resizable panels

## Import

```svelte
<script>
// Import individual layouts
import { SidebarLayout } from '@ticatec/uniface-element/app-layout';
import HeaderLayout from '@ticatec/uniface-element/app-layout/HeaderLayout';
import ClassicLayout from '@ticatec/uniface-element/app-layout/ClassicLayout';
import ColumnsLayout from '@ticatec/uniface-element/app-layout/ColumnsLayout';
import RowsLayout from '@ticatec/uniface-element/app-layout/RowsLayout';
</script>
```

## SidebarLayout

A layout with an optional resizable sidebar on the left and header area.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
| `headerHeight` | `string` | `"48px"` | Height of the header area |
| `sidebarWidth` | `string` | `"300px"` | Initial width of the sidebar |
| `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width |
| `sidebarMinWidth` | `string \| null` | `null` | Minimum sidebar width |

### Slots

- `sidebar` - Content for the sidebar area
- `header` - Content for the header area
- `default` - Main content area

### Example

```svelte
<SidebarLayout 
  sidebarResize={true}
  sidebarWidth="250px"
  sidebarMinWidth="200px"
  sidebarMaxWidth="400px"
>
  <div slot="sidebar">
    <!-- Navigation menu -->
  </div>
  
  <div slot="header">
    <!-- Top bar content -->
  </div>
  
  <!-- Main content -->
  <div>Main application content</div>
</SidebarLayout>
```

## HeaderLayout

A layout with a header at the top and optional sidebar below the header.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `headerHeight` | `string` | `"48px"` | Height of the header |
| `sidebarWidth` | `string` | `"300px"` | Width of the sidebar |
| `sidebarResize` | `boolean` | `false` | Enable sidebar resizing |
| `sidebarMaxWidth` | `string \| null` | `null` | Maximum sidebar width |
| `sidebarMinWidth` | `string \| null` | `null` | Minimum sidebar width |

### Slots

- `header` - Content for the header area
- `sidebar` - Content for the sidebar area
- `default` - Main content area

### Example

```svelte
<HeaderLayout headerHeight="60px" sidebarResize={true}>
  <div slot="header">
    <!-- App header -->
  </div>
  
  <div slot="sidebar">
    <!-- Side navigation -->
  </div>
  
  <!-- Main content -->
  <div>Page content</div>
</HeaderLayout>
```

## ClassicLayout

A traditional desktop application layout with header, left sidebar, optional right sidebar, and status bar.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `headerHeight` | `string` | `"48px"` | Height of the header |
| `sidebarWidth` | `string` | `"300px"` | Width of the left sidebar |
| `statusHeight` | `string` | `"22px"` | Height of the status bar |
| `rightBarWidth` | `string` | `"240px"` | Width of the right sidebar |
| `sidebarResize` | `boolean` | `false` | Enable left sidebar resizing |
| `sidebarMaxWidth` | `string \| null` | `null` | Maximum left sidebar width |
| `sidebarMinWidth` | `string \| null` | `null` | Minimum left sidebar width |
| `rightBarResize` | `boolean` | `false` | Enable right sidebar resizing |
| `rightBarMaxWidth` | `string \| null` | `null` | Maximum right sidebar width |
| `rightBarMinWidth` | `string \| null` | `null` | Minimum right sidebar width |

### Slots

- `header` - Header content
- `sidebar` - Left sidebar content
- `right-sidebar` - Right sidebar content
- `bottom` - Status bar content
- `default` - Main content area

### Example

```svelte
<ClassicLayout 
  sidebarResize={true}
  rightBarResize={true}
  statusHeight="24px"
>
  <div slot="header">
    <!-- Application header -->
  </div>
  
  <div slot="sidebar">
    <!-- Left navigation -->
  </div>
  
  <div slot="right-sidebar">
    <!-- Properties panel -->
  </div>
  
  <div slot="bottom">
    <!-- Status bar -->
  </div>
  
  <!-- Main workspace -->
  <div>Editor or main content</div>
</ClassicLayout>
```

## ColumnsLayout

A flexible column-based layout with resizable left and right panels.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `string` | `"100%"` | Total width of the layout |
| `height` | `string` | `"100%"` | Total height of the layout |
| `leftWidth` | `string \| null` | `null` | Width of the left column |
| `rightWidth` | `string \| null` | `null` | Width of the right column |
| `leftMin` | `string \| null` | `null` | Minimum width of left column |
| `leftMax` | `string \| null` | `null` | Maximum width of left column |
| `rightMin` | `string \| null` | `null` | Minimum width of right column |
| `rightMax` | `string \| null` | `null` | Maximum width of right column |
| `leftResize` | `boolean` | `false` | Enable left column resizing |
| `rightResize` | `boolean` | `false` | Enable right column resizing |

### Slots

- `left` - Left column content
- `right` - Right column content
- `default` - Center column content

### Example

```svelte
<ColumnsLayout 
  leftResize={true}
  rightResize={true}
  leftWidth="200px"
  rightWidth="300px"
  leftMin="150px"
  rightMin="250px"
>
  <div slot="left">
    <!-- Left panel -->
  </div>
  
  <div slot="right">
    <!-- Right panel -->
  </div>
  
  <!-- Center content -->
  <div>Main content area</div>
</ColumnsLayout>
```

## RowsLayout

A flexible row-based layout with resizable top and bottom panels.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `string` | `"100%"` | Total width of the layout |
| `height` | `string` | `"100%"` | Total height of the layout |
| `topHeight` | `string \| null` | `null` | Height of the top row |
| `bottomHeight` | `string \| null` | `null` | Height of the bottom row |
| `topMin` | `string \| null` | `null` | Minimum height of top row |
| `topMax` | `string \| null` | `null` | Maximum height of top row |
| `bottomMin` | `string \| null` | `null` | Minimum height of bottom row |
| `bottomMax` | `string \| null` | `null` | Maximum height of bottom row |
| `topResize` | `boolean` | `false` | Enable top row resizing |
| `bottomResize` | `boolean` | `false` | Enable bottom row resizing |

### Slots

- `top` - Top row content
- `bottom` - Bottom row content
- `default` - Center row content

### Example

```svelte
<RowsLayout 
  topResize={true}
  bottomResize={true}
  topHeight="150px"
  bottomHeight="100px"
  topMin="100px"
  bottomMin="80px"
>
  <div slot="top">
    <!-- Top panel -->
  </div>
  
  <div slot="bottom">
    <!-- Bottom panel -->
  </div>
  
  <!-- Center content -->
  <div>Main content area</div>
</RowsLayout>
```

## Features

### Resizable Panels
All layout components support resizable panels when enabled:
- Drag the split handles to resize panels
- Respect minimum and maximum width/height constraints
- Smooth resizing with visual feedback

### Responsive Design
- Layouts adapt to container dimensions
- Flexible sizing with percentage and fixed units
- Overflow handling for content areas

### Slot-based Content
- Use named slots for different layout areas
- Optional slots are hidden when no content is provided
- Default slot for main content area

## Common Patterns

### Application Shell

```svelte
<ClassicLayout sidebarResize={true}>
  <div slot="header" class="app-header">
    <h1>My Application</h1>
    <!-- Navigation, user menu, etc. -->
  </div>
  
  <div slot="sidebar" class="navigation">
    <!-- Menu items -->
  </div>
  
  <div slot="bottom" class="status-bar">
    <!-- Status information -->
  </div>
  
  <main class="main-content">
    <!-- Page content -->
  </main>
</ClassicLayout>
```

### Dashboard Layout

```svelte
<ColumnsLayout leftResize={true} rightResize={true}>
  <div slot="left" class="sidebar">
    <!-- Filters, navigation -->
  </div>
  
  <div slot="right" class="details-panel">
    <!-- Item details, actions -->
  </div>
  
  <div class="dashboard-grid">
    <!-- Main dashboard content -->
  </div>
</ColumnsLayout>
```

### Split View Editor

```svelte
<RowsLayout topResize={true} bottomResize={true}>
  <div slot="top" class="editor-area">
    <!-- Code editor -->
  </div>
  
  <div slot="bottom" class="output-panel">
    <!-- Console, preview, etc. -->
  </div>
  
  <div class="file-explorer">
    <!-- File tree, tabs -->
  </div>
</RowsLayout>
```

## Styling

All layout components use flexbox for positioning and include:

- Proper overflow handling
- Border styling with CSS custom properties
- Gap spacing between panels
- Box-sizing: border-box for predictable sizing

### CSS Custom Properties

```css
:root {
  --uniface-plain-border-color: #f0f0f0;
}
```

## Accessibility

- Proper semantic structure with container elements
- Keyboard navigation support through resizable splits
- Focus management during panel resizing
- Screen reader friendly layout structure

## Browser Support

- Modern browsers with flexbox support
- CSS custom properties support
- Drag and drop for resizing functionality

## Best Practices

1. **Choose the Right Layout**: Select the layout component that best fits your application structure
2. **Set Appropriate Constraints**: Use min/max width/height to prevent panels from becoming too small or large
3. **Consider Mobile**: Layouts may need responsive adjustments for mobile devices
4. **Content Overflow**: Ensure content areas have appropriate overflow handling
5. **Performance**: Minimize content in resizable panels for smooth resizing experience