Sidebar work

frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import { observer, inject } from 'mobx-react';
+import { Flex } from 'reflexbox';
+import styled from 'styled-components';
+
+import SidebarLink from '../SidebarLink';
+
+import CollectionsStore from 'stores/CollectionsStore';
+
+type Props = {
+  collections: CollectionsStore,
+};
+
+const SidebarCollectionList = observer(({ collections }: Props) => {
+  return (
+    <Flex column>
+      <Header>Collections</Header>
+      {collections.data.map(collection => (
+        <SidebarLink key={collection.id} to={collection.url}>
+          {collection.name}
+        </SidebarLink>
+      ))}
+    </Flex>
+  );
+});
+
+const Header = styled(Flex)`
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: #9FA6AB;
+  letter-spacing: 0.04em;
+`;
+
+export default inject('collections')(SidebarCollectionList);

frontend/components/Layout/components/SidebarCollectionList/index.js

@@ -0,0 +1,3 @@
+// @flow
+import SidebarCollectionList from './SidebarCollectionList';
+export default SidebarCollectionList;