docs: aside new docs (#3152)

docs/content/components/aside/aside.mdx

@@ -0,0 +1,72 @@
+---
+title: Aside
+group: Layout
+caption: Component to seperate content from the main content.
+---
+
+The `<Aside>` is a responsive layout component. It should be used if you want to layout side content next to the main content. The side has a fixed width and the other one(the main content) can have a dynamic width.
+
+If the screen becomes too small for the `<Aside>`, the content will automatically wrap.
+
+It is important to note that the `<Aside>` must have exactly two children, where none is a `<Fragment>`.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Aside } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'space',
+      type: 'ResponsiveStyleValue<string>',
+      description: 'The space between the content and the aside.',
+      default: 'none',
+    },
+    {
+      property: 'side',
+      type: '"left" | "right"',
+      description: 'The side of the aside content.',
+      default: 'left',
+    },
+    {
+      property: 'sideWidth',
+      type: 'ResponsiveStyleValue<string>',
+      description: 'The side width of the aside content.',
+      default: 'none',
+    },
+    {
+      property: 'wrap',
+      type: 'Non-zero Percentage',
+      description: 'At which percent the content should wrap.',
+      default: '50%',
+    },
+    {
+      property: 'stretch',
+      type: 'boolean',
+      description: 'Stretches the aside.',
+      default: 'true',
+    },
+  ]}
+/>
+
+## Examples
+
+### Space between elements
+
+The example shows how the `space` prop is to use. It defines the gap between the contents.
+
+<ComponentDemo file="./space.demo.tsx" />
+
+### Aside on the right
+
+A simple example on how to set the `side` prop.
+
+<ComponentDemo file="./rightside.demo.tsx" />

docs/content/components/aside/rightside.demo.tsx

@@ -0,0 +1,8 @@
+import { Aside } from '@marigold/components';
+
+export default () => (
+  <Aside space={4} side="right">
+    <div className="h-48 w-14 border border-slate-300 bg-slate-300" />
+    <div className="border border-slate-300 bg-slate-300" />
+  </Aside>
+);

docs/content/components/aside/space.demo.tsx

@@ -0,0 +1,8 @@
+import { Aside } from '@marigold/components';
+
+export default () => (
+  <Aside space={5}>
+    <div className="h-28 w-14 border border-slate-300 bg-slate-300" />
+    <div className="border border-slate-300 bg-slate-300" />
+  </Aside>
+);

docs/registry/index.tsx

@@ -11,6 +11,16 @@ export const registry = {
     ),
     file: 'content/components/accordion/basic-accordion.demo.tsx',
   },
+  rightside: {
+    name: 'rightside',
+    demo: dynamic(() => import('@/content/components/aside/rightside.demo')),
+    file: 'content/components/aside/rightside.demo.tsx',
+  },
+  space: {
+    name: 'space',
+    demo: dynamic(() => import('@/content/components/aside/space.demo')),
+    file: 'content/components/aside/space.demo.tsx',
+  },
   'button-variant': {
     name: 'button-variant',
     demo: dynamic(