Sidebar work

frontend/components/Layout/Layout.js

@@ -6,23 +6,31 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import _ from 'lodash';
 import keydown from 'react-keydown';
-import searchIcon from 'assets/icons/search.svg';
 import { Flex } from 'reflexbox';
-import { textColor, headerHeight } from 'styles/constants.scss';
+import { textColor } from 'styles/constants.scss';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import LoadingIndicator from 'components/LoadingIndicator';
+
+import SidebarCollection from './components/SidebarCollection';
+import SidebarCollectionList from './components/SidebarCollectionList';
+import SidebarLink from './components/SidebarLink';
+
 import UserStore from 'stores/UserStore';
 import AuthStore from 'stores/AuthStore';
+import UiStore from 'stores/UiStore';
+import CollectionsStore from 'stores/CollectionsStore';
 
 type Props = {
   history: Object,
+  collections: CollectionsStore,
   children?: ?React.Element<any>,
   actions?: ?React.Element<any>,
   title?: ?React.Element<any>,
   loading?: boolean,
   user: UserStore,
   auth: AuthStore,
+  ui: UiStore,
   search: ?boolean,
   notifications?: React.Element<any>,
 };
@@ -36,13 +44,13 @@ type Props = {
 
   @keydown(['/', 't'])
   search() {
-    if (this.props.auth.isAuthenticated)
+    if (this.props.auth.authenticated)
       _.defer(() => this.props.history.push('/search'));
   }
 
   @keydown(['d'])
   dashboard() {
-    if (this.props.auth.isAuthenticated)
+    if (this.props.auth.authenticated)
       _.defer(() => this.props.history.push('/'));
   }
 
@@ -51,7 +59,7 @@ type Props = {
   };
 
   render() {
-    const { auth, user } = this.props;
+    const { user, auth, ui, collections } = this.props;
 
     return (
       <Container column auto>
@@ -69,48 +77,52 @@ type Props = {
 
         {this.props.notifications}
 
-        <Header>
-          <Flex align="center">
-            <LogoLink to="/">Atlas</LogoLink>
-          </Flex>
-          <Flex>
-            <Flex>
-              <Flex align="center">
-                {this.props.actions}
-              </Flex>
-              {auth.authenticated &&
-                user &&
-                <Flex>
-                  {this.props.search &&
-                    <Flex>
-                      <Link to="/search">
-                        <Search title="Search (/)">
-                          <SearchIcon src={searchIcon} alt="Search" />
-                        </Search>
-                      </Link>
-                    </Flex>}
-                  <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
-                    <MenuLink to="/settings">
-                      <MenuItem>Settings</MenuItem>
-                    </MenuLink>
-                    <MenuLink to="/keyboard-shortcuts">
-                      <MenuItem>
-                        Keyboard shortcuts
-                      </MenuItem>
-                    </MenuLink>
-                    <MenuLink to="/developers">
-                      <MenuItem>API</MenuItem>
-                    </MenuLink>
-                    <MenuItem onClick={this.handleLogout}>Logout</MenuItem>
-                  </DropdownMenu>
-                </Flex>}
-            </Flex>
-          </Flex>
-        </Header>
+        <Flex auto>
+          {auth.authenticated &&
+            user &&
+            <Sidebar column>
+              <Header justify="space-between">
+                <Flex align="center">
+                  <LogoLink to="/">Atlas</LogoLink>
+                </Flex>
+                <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
+                  <MenuLink to="/settings">
+                    <MenuItem>Settings</MenuItem>
+                  </MenuLink>
+                  <MenuLink to="/keyboard-shortcuts">
+                    <MenuItem>
+                      Keyboard shortcuts
+                    </MenuItem>
+                  </MenuLink>
+                  <MenuLink to="/developers">
+                    <MenuItem>API</MenuItem>
+                  </MenuLink>
+                  <MenuItem onClick={this.handleLogout}>Logout</MenuItem>
+                </DropdownMenu>
+              </Header>
 
-        <Content auto justify="center">
-          {this.props.children}
-        </Content>
+              <Flex column>
+                <LinkSection>
+                  <SidebarLink to="/search">Search</SidebarLink>
+                </LinkSection>
+                <LinkSection>
+                  <SidebarLink to="/dashboard">Dashboard</SidebarLink>
+                  <SidebarLink to="/starred">Starred</SidebarLink>
+                </LinkSection>
+                <LinkSection>
+                  {ui.activeCollection
+                    ? <SidebarCollection
+                        collection={collections.getById(ui.activeCollection)}
+                      />
+                    : <SidebarCollectionList />}
+                </LinkSection>
+              </Flex>
+            </Sidebar>}
+
+          <Content auto justify="center">
+            {this.props.children}
+          </Content>
+        </Flex>
       </Container>
     );
   }
@@ -122,24 +134,8 @@ const Container = styled(Flex)`
   height: 100%;
 `;
 
-const Header = styled(Flex)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  justify-content: space-between;
-  align-items: center;
-
-  padding: 0 20px;
-
-  z-index: 1;
-  height: ${headerHeight};
-
-  font-size: 14px;
-  line-height: 1;
-`;
-
 const LogoLink = styled(Link)`
+  margin-top: 5px;
   font-family: 'Atlas Grotesk';
   font-weight: bold;
   color: ${textColor};
@@ -147,16 +143,6 @@ const LogoLink = styled(Link)`
   font-size: 16px;
 `;
 
-const Search = styled(Flex)`
-  margin: 0 5px;
-  padding: 15px 5px 0 5px;
-  cursor: pointer;
-`;
-
-const SearchIcon = styled.img`
-  height: 20px;
-`;
-
 const Avatar = styled.img`
   width: 24px;
   height: 24px;
@@ -172,4 +158,20 @@ const Content = styled(Flex)`
   overflow: scroll;
 `;
 
-export default withRouter(inject('user', 'auth')(Layout));
+const Sidebar = styled(Flex)`
+  width: 250px;
+  padding: 10px 20px;
+  background: rgba(250, 251, 252, 0.71);
+  border-right: 1px solid #eceff3;
+`;
+
+const Header = styled(Flex)`
+  margin-bottom: 20px;
+`;
+
+const LinkSection = styled(Flex)`
+  margin-bottom: 20px;
+  flex-direction: column;
+`;
+
+export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));

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;