> For the complete documentation index, see [llms.txt](https://docs-wieldy.g-axon.work/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-wieldy.g-axon.work/components/wieldylayout.md).

# WieldyLayout

### Overview

The `WieldyLayout` component provides a flexible and customizable layout solution for your React applications. It is built using Ant Design's `Layout` components and is highly configurable via styles, classes, and layout options. The `WieldyLayout` supports a modular architecture for the header, footer, sidebar, and content areas, allowing developers to create dynamic and adaptive layouts effortlessly.

***

### Usage

Here is a basic example of how to use the `WieldyLayout` component:

```javascript
import React from "react";
import { WieldyLayout } from "./WieldyLayout";

const layoutConfig = {
  styles: {
    header: { backgroundColor: "#fff" },
    sidebar: { backgroundColor: "#f0f2f5" },
  },
  classes: {
    root: "custom-root-class",
  },
  layoutOptions: {
    header: { fixed: true },
    sidebar: { hidden: false, fixed: true },
    footer: { hidden: false },
  },
};

const App = () => (
  <WieldyLayout
    header={<div>Header Content</div>}
    sidebar={<div>Sidebar Content</div>}
    footer={<div>Footer Content</div>}
    styles={layoutConfig.styles}
    classes={layoutConfig.classes}
    layoutOptions={layoutConfig.layoutOptions}
  >
    <div>Main Content</div>
  </WieldyLayout>
);

export default App;
```

***

### Props

The `WieldyLayout` component accepts the following props:

#### **header**

* **Type:** `React.ReactNode`
* **Description:** Content to render in the header.
* **Optional:** Yes

#### **footer**

* **Type:** `React.ReactNode`
* **Description:** Content to render in the footer.
* **Optional:** Yes

#### **sidebar**

* **Type:** `React.ReactNode`
* **Description:** Content to render in the sidebar.
* **Optional:** Yes

#### **rightSidebar**

* **Type:** `React.ReactNode`
* **Description:** Content to render in the right sidebar.
* **Optional:** Yes

#### **styles**

* **Type:** `WieldyLayoutStyles`
* **Description:** Inline CSS styles for various layout sections.
* **Optional:** Yes

#### **classes**

* **Type:** `WieldyLayoutClasses`
* **Description:** CSS class names for various layout sections.
* **Optional:** Yes

#### **layoutOptions**

* **Type:** `WieldyLayoutOptions`
* **Description:** Configuration options for the header, footer, sidebar, and right sidebar.
* **Optional:** Yes

#### **children**

* **Type:** `React.ReactNode`
* **Description:** Main content to render within the layout.
* **Required:** Yes

***

### Types

#### **WieldyLayoutClasses**

Defines class names for various layout sections.

| Property       | Type     | Description                      |
| -------------- | -------- | -------------------------------- |
| `root`         | `string` | CSS class for the root layout.   |
| `header`       | `string` | CSS class for the header.        |
| `footer`       | `string` | CSS class for the footer.        |
| `sidebar`      | `string` | CSS class for the sidebar.       |
| `content`      | `string` | CSS class for the content.       |
| `rightSidebar` | `string` | CSS class for the right sidebar. |

***

#### **WieldyLayoutStyles**

Defines inline styles for various layout sections.

| Property       | Type            | Description                         |
| -------------- | --------------- | ----------------------------------- |
| `root`         | `CSSProperties` | Inline style for the root layout.   |
| `header`       | `CSSProperties` | Inline style for the header.        |
| `footer`       | `CSSProperties` | Inline style for the footer.        |
| `sidebar`      | `CSSProperties` | Inline style for the sidebar.       |
| `content`      | `CSSProperties` | Inline style for the content.       |
| `rightSidebar` | `CSSProperties` | Inline style for the right sidebar. |

***

#### **WieldyLayoutOptions**

Configuration options for layout sections.

**Header Options**

| Property    | Type      | Description                   |
| ----------- | --------- | ----------------------------- |
| `fixed`     | `boolean` | Whether the header is fixed.  |
| `hidden`    | `boolean` | Whether the header is hidden. |
| `spreadOut` | `boolean` | Spreads out the header items. |

**Sidebar Options**

| Property        | Type            | Description                        |
| --------------- | --------------- | ---------------------------------- |
| `hidden`        | `boolean`       | Whether the sidebar is hidden.     |
| `fixedPosition` | `{top, bottom}` | Fixed positioning for the sidebar. |
| `isDrawer`      | `boolean`       | Whether the sidebar is a drawer.   |
| `fixed`         | `boolean`       | Whether the sidebar is fixed.      |

**Footer Options**

| Property    | Type      | Description                   |
| ----------- | --------- | ----------------------------- |
| `fixed`     | `boolean` | Whether the footer is fixed.  |
| `hidden`    | `boolean` | Whether the footer is hidden. |
| `spreadOut` | `boolean` | Spreads out the footer items. |

***

### Context

The `WieldyLayoutContextType` allows developers to dynamically update layout options during runtime.

#### Methods

* `setHeaderOptions(options: WieldyLayoutHeaderOptions)`
* `setSidebarOptions(options: WieldyLayoutSidebarOptions)`
* `setRightSidebarOptions(options: WieldyLayoutSidebarOptions)`
* `setFooterOptions(options: WieldyLayoutFooterOptions)`

***

### Advanced Example

Dynamically updating layout options using context:

```javascript
import React, { useContext } from "react";
import { WieldyLayout, WieldyLayoutContext } from "./WieldyLayout";

const DynamicLayout = () => {
  const { setHeaderOptions, setSidebarOptions } = useContext(WieldyLayoutContext);

  return (
    <WieldyLayout
      header={<div>Dynamic Header</div>}
      sidebar={<div>Dynamic Sidebar</div>}
    >
      <button
        onClick={() => setHeaderOptions({ fixed: false })}
      >
        Toggle Header Fixed
      </button>
      <button
        onClick={() => setSidebarOptions({ hidden: true })}
      >
        Hide Sidebar
      </button>
    </WieldyLayout>
  );
};

export default DynamicLayout;
```

***

### Styling

The `styles` and `classes` props provide complete flexibility for styling:

```
const layoutConfig = {
  styles: {
    header: { backgroundColor: "blue" },
    sidebar: { width: 250 },
  },
  classes: {
    root: "custom-root-class",
    header: "custom-header-class",
  },
};
```

***

### Best Practices

1. Use the `context` API for dynamic layout changes.
2. Combine `styles` and `classes` for optimal customization.
3. Modularize reusable components like headers, footers, and sidebars.

***

### FAQs

1. **Can I hide specific layout sections?** Yes, use the `hidden` property in `layoutOptions`.
2. **How do I style individual sections?** Use the `styles` or `classes` props.
3. **Does `WieldyLayout` support responsive design?** Yes, you can leverage Ant Design’s grid system and media queries.

For further assistance, refer to the official documentation or contact support.