# Sidebar
> The sidebar layout wraps two adjacent elements, where one element takes up less horizontal space than its neighbor.

## Import

```js
import { Sidebar } from '@gemini-suite/vera-react';
```

## Background

The sidebar layout creates two content panels inside a containing element. These two panels stack vertically, until there is enough horizontal space for them to sit side-by-side horizontally. One content panel is narrower than the other, acting as a "sidebar".

Sidebar layout exists simultaneously in one of the two configurations: horizontal and vertical. Which configuration is adopted is dependent entirely on the space it is afforded when placed within a parent container.

As there are no viewport media queries involved, the sidebar layout will nest nicely inside other containers.

## Examples

### Default configuration

In the example below `Sidebar` wraps when the wide panel starts to take up less than `50%` of the available horizontal space.

```jsx resizable=true
<Sidebar side="right">
  <ExampleBox>Wide panel</ExampleBox>
  <ExampleBox css={{ px: '$spacingM' }}>Narrow "sidebar" panel</ExampleBox>
</Sidebar>
```

### Media object

The placing of an item of media next to a description. The sidebar/image is `15rem` wide in the horizontal configuration. Uses the default `contentMin` “breakpoint” of `50%` and an increased `gap` value.

```jsx resizable=true
<Sidebar sideWidth="15rem" gap="spacingL" noStretch>
  <div>
    <AspectRatio ratio={2 / 1}>
      <img
        src="https://images.unsplash.com/photo-1480497490787-505ec076689f?q=80&w=300&dpr=2"
        alt=""
      />
    </AspectRatio>
  </div>
  <Box as="p" margin="none" css={{ backgroundColor: '$colorBlue10' }}>
    The text accompanying the image
  </Box>
</Sidebar>
```

### Switched media object

The same as the last example, except the text accompanying the image is the sidebar.

```jsx resizable=true
<Sidebar side="right" sideWidth="15rem">
  <div>
    <AspectRatio>
      <img
        src="https://images.unsplash.com/photo-1421790500381-fc9b5996f343?q=80&w=600&dpr=2"
        alt=""
      />
    </AspectRatio>
  </div>
  <Box as="p" margin="none" css={{ backgroundColor: '$colorBlue10' }}>
    The text accompanying the image is the sidebar allowing the image to grow
  </Box>
</Sidebar>
```

### Form elements

Sidebar layout is applicable to all sorts of content. In the following example it is used to align buttons with form inputs (where the button forms the sidebar and has an intrinsic, content-based width).

```jsx resizable=true
<Sidebar side="right" contentMin="70%">
  <TextInput aria-label="Search query" />
  <Button>Search</Button>
</Sidebar>
```

---

## API Reference

| Name         | Type                                                      | Default      | Description                                                                                                                                                                                                                                                                                  | Required |
| ------------ | --------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`         | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `div`        | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css`        | `StitchesCss`                                             |              | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |
| `side`       | `"left" \| "right"`                                       | `"left"`     | Which element to treat as the sidebar.                                                                                                                                                                                                                                                       |          |
| `sideWidth`  | `StitchesCss['width']`                                    |              | Represents the width of the sidebar when adjacent. If not set it defaults to the sidebar's content width.                                                                                                                                                                                    |          |
| `contentMin` | `StitchesCss['width']`                                    | `50%`        | The minimum width of the content element in the horizontal configuration before wrapping. Should be a percentage.                                                                                                                                                                            |          |
| `noStretch`  | `boolean`                                                 | `false`      | Make the adjacent elements adopt their natural height.                                                                                                                                                                                                                                       |          |
| `gap`        | `SpacingToken`                                            | `"spacingM"` | Spacing between the elements.                                                                                                                                                                                                                                                                |          |