diff --git a/app/components/sidebar/index.js b/app/components/sidebar/index.js
index c658b1c..12985aa 100644
--- a/app/components/sidebar/index.js
+++ b/app/components/sidebar/index.js
@@ -8,17 +8,26 @@ import { styles } from './styles';
// TODO: Not sure this is the best approach to styling
// in a StyledComponents-powered application
-const Wrapper = styled.div`${styles.wrapper}`;
+const Wrapper = styled.div`
+ ${styles.wrapper}
+`;
-export const SidebarComponent = () => (
+type MenuItem = { route: string, label: string };
+
+type Props = {
+ options?: MenuItem[],
+};
+
+export const SidebarComponent = ({ options }: Props) => (
- {MENU_OPTIONS.map(item => (
-
+ {(options || []).map(item => (
+
{item.label}
))}
);
+
+SidebarComponent.defaultProps = {
+ options: MENU_OPTIONS,
+};
diff --git a/app/components/sidebar/sidebar.mdx b/app/components/sidebar/sidebar.mdx
new file mode 100644
index 0000000..af7f216
--- /dev/null
+++ b/app/components/sidebar/sidebar.mdx
@@ -0,0 +1,16 @@
+---
+name: Sidebar
+---
+
+import { Playground, PropsTable } from 'docz'
+import { SidebarComponent } from './index.js'
+
+# Sidebar
+
+
+
+## Basic usage
+
+
+
+