# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-wieldy.g-axon.work/components/wieldylayout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.