# SideKick

The SideKick component provides a complementary panel that appears alongside the
main content area, offering additional context or functionality without
disrupting the primary workflow. It's default responsive and will wrap content
when either of the provided widths are exceeded.

## Design & usage guidelines

Use SideKick when you need to:

* Display supplementary information related to the main content
* Provide quick access to contextual actions or tools
* Show preview content while maintaining focus on the primary task
* Present form fields or options that are optional or secondary to the main
  workflow

### When to use

* When users need quick access to related information without leaving their
  current context
* For displaying preview content that enhances the primary workflow
* When additional options or tools should be readily available but not prominent
* To show supplementary form fields that aren't required for the primary task

### When not to use

* For critical primary actions or required form fields
* When the additional content is essential to complete the main task
* If the supplementary content needs to block interaction with the main content
* For temporary or dismissible notifications (use [Toast](../Toast/Toast.md)
  instead)
* For error messages or warnings (use [Banner](../Banner/Banner.md) instead)

## Implementation

The SideKick component creates a flexible horizontal layout with a main content
area and a side panel. The layout automatically adjusts based on available space
and wraps content when needed.

### Basic usage

```tsx
import React from "react";
import { SideKick } from "@jobber/components/SideKick";
import { Card } from "@jobber/components/Card";
import { Box } from "@jobber/components/Box";
import { Text } from "@jobber/components/Text";
import { ContentBlock } from "@jobber/components/ContentBlock";

export function SideKickBasicExample() {
  return (
    <ContentBlock maxWidth="100%">
      <SideKick sideWidth="80px" contentMinWidth="60%">
        <Card>
          <Box padding="base">
            <Text>Main content goes here</Text>
          </Box>
        </Card>
        <Card>
          <Box padding="base">
            <Text>Side panel content goes here</Text>
          </Box>
        </Card>
      </SideKick>
    </ContentBlock>
  );
}
```

### With custom widths

```tsx
import React from "react";
import { SideKick } from "@jobber/components/SideKick";
import { Card } from "@jobber/components/Card";
import { Box } from "@jobber/components/Box";
import { Text } from "@jobber/components/Text";
import { ContentBlock } from "@jobber/components/ContentBlock";

export function SideKickCustomWidthsExample() {
  return (
    <ContentBlock maxWidth="100%">
      <SideKick contentMinWidth="50%" sideWidth="40%">
        <Card>
          <Box padding="base">
            <Text>Main content (50% width or wrap)</Text>
          </Box>
        </Card>
        <Card>
          <Box padding="base">
            <Text> Side width (40% of remaining space)</Text>
          </Box>
        </Card>
      </SideKick>
    </ContentBlock>
  );
}
```

## Related components

* For equal width responsive panels use
  [ResponsiveSwitcher](../ResponsiveSwitcher/ResponsiveSwitcher.md)
* For vertical spacing use [Stack](../Stack/Stack.md)
* For horizontal justified content (including centering and text) use
  [ContentBlock](../ContentBlock/ContentBlock.md)


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
| `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the container as. Defaults to `div`. |
| `autoWidth` | `boolean` | No | `false` | Whether to allow the sidekick to take the width of the content. Defaults to 100% |
| `collapseBelow` | `"lg" | "md" | "sm" | "xl" | "xs"` | No | — | The breakpoint to collapse the sidekick at. |
| `collapsed` | `boolean` | No | — | Force the sidekick to collapse. Use this when our breakpoints are not enough control. |
| `contentMinWidth` | `string` | No | `50%` | The minimum width of the content. |
| `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
| `gap` | `GapSpacing` | No | `var(--space-base)` | The amount of space between the sidekick and the content. Semantic tokens are available. |
| `id` | `string` | No | — | Standard HTML id attribute. |
| `onRight` | `boolean` | No | — | Whether to place the sidekick on the right. |
| `role` | `AriaRole` | No | — | Standard HTML role attribute. |
| `sideWidth` | `string` | No | — | The width of the sidekick. |
| `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
| `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |