Sidebar work

frontend/components/Layout/components/SidebarCollection/SidebarCollection.js

@@ -0,0 +1,39 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Flex } from 'reflexbox';
+import styled from 'styled-components';
+
+import SidebarLink from '../SidebarLink';
+
+import Collection from 'models/Collection';
+
+type Props = {
+  collection: Collection,
+};
+
+const SidebarCollection = ({ collection }: Props) => {
+  if (collection) {
+    return (
+      <Flex column>
+        <Header>{collection.name}</Header>
+        {collection.documents.map(document => (
+          <SidebarLink key={document.id} to={document.url}>
+            {document.title}
+          </SidebarLink>
+        ))}
+      </Flex>
+    );
+  }
+  return null;
+};
+
+const Header = styled(Flex)`
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: #9FA6AB;
+  letter-spacing: 0.04em;
+`;
+
+export default observer(SidebarCollection);

frontend/components/Layout/components/SidebarCollection/index.js

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

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;

frontend/components/Layout/components/SidebarLink/SidebarLink.js

@@ -0,0 +1,26 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+import { NavLink } from 'react-router-dom';
+import { Flex } from 'reflexbox';
+import styled from 'styled-components';
+
+const activeStyle = {
+  color: '#000000',
+};
+
+const SidebarLink = observer(props => (
+  <LinkContainer>
+    <NavLink {...props} activeStyle={activeStyle} />
+  </LinkContainer>
+));
+
+const LinkContainer = styled(Flex)`
+  padding: 5px 0;
+  
+  a {
+    color: #848484;
+  }
+`;
+
+export default SidebarLink;

frontend/components/Layout/components/SidebarLink/index.js

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