Fixes

app/components/Sidebar/components/Collections.js

@@ -5,7 +5,7 @@ import { observer, inject } from 'mobx-react';
 import type { Location } from 'react-router-dom';
 import Flex from 'shared/components/Flex';
 import styled from 'styled-components';
-import { color, fontWeight } from 'shared/styles/constants';
+import { color } from 'shared/styles/constants';
 
 import Header from './Header';
 import SidebarLink from './SidebarLink';
@@ -84,14 +84,32 @@ class CollectionLink extends Component {
     this.dropzoneRef.open();
   };
 
-  render() {
+  renderDocuments() {
     const {
       history,
       collection,
       activeDocument,
-      ui,
       prefetchDocument,
     } = this.props;
+
+    return (
+      <CollectionChildren column>
+        {collection.documents.map(document => (
+          <DocumentLink
+            key={document.id}
+            history={history}
+            document={document}
+            activeDocument={activeDocument}
+            prefetchDocument={prefetchDocument}
+            depth={0}
+          />
+        ))}
+      </CollectionChildren>
+    );
+  }
+
+  render() {
+    const { history, collection, ui } = this.props;
     const expanded = collection.id === ui.activeCollectionId;
 
     return (
@@ -108,6 +126,9 @@ class CollectionLink extends Component {
           to={collection.url}
           icon={<CollectionIcon expanded={expanded} color={collection.color} />}
           iconColor={collection.color}
+          expandedContent={this.renderDocuments()}
+          hideExpandToggle
+          expand={expanded}
         >
           <CollectionName justify="space-between">
             {collection.name}
@@ -123,21 +144,6 @@ class CollectionLink extends Component {
               />
             </CollectionAction>
           </CollectionName>
-
-          {expanded && (
-            <Children column>
-              {collection.documents.map(document => (
-                <DocumentLink
-                  key={document.id}
-                  history={history}
-                  document={document}
-                  activeDocument={activeDocument}
-                  prefetchDocument={prefetchDocument}
-                  depth={0}
-                />
-              ))}
-            </Children>
-          )}
         </SidebarLink>
       </StyledDropToImport>
     );
@@ -194,7 +200,7 @@ const DocumentLink = observer(
             expand={showChildren}
             expandedContent={
               document.children.length ? (
-                <Children column>
+                <DocumentChildren column>
                   {document.children.map(childDocument => (
                     <DocumentLink
                       key={childDocument.id}
@@ -205,7 +211,7 @@ const DocumentLink = observer(
                       depth={depth + 1}
                     />
                   ))}
-                </Children>
+                </DocumentChildren>
               ) : (
                 undefined
               )
@@ -223,7 +229,7 @@ const CollectionName = styled(Flex)`
   padding: 0 0 4px;
 `;
 
-const CollectionAction = styled.a`
+const CollectionAction = styled.span`
   position: absolute;
   right: 0;
   color: ${color.slate};
@@ -250,10 +256,14 @@ const StyledDropToImport = styled(DropToImport)`
   }
 `;
 
-const Children = styled(Flex)`
+const CollectionChildren = styled(Flex)`
+  margin-top: -4px;
+  margin-left: 36px;
+`;
+
+const DocumentChildren = styled(Flex)`
+  margin-top: -4px;
   margin-left: 12px;
-  font-weight: ${fontWeight.regular};
-  color: ${color.slateDark};
 `;
 
 export default inject('collections', 'ui', 'documents')(Collections);

app/components/Sidebar/components/SidebarLink.js

@@ -33,7 +33,7 @@ const StyledNavLink = styled(NavLink)`
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 4px 0;
-  margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
+  margin-left: ${({ iconVisible }) => (iconVisible ? '-20px;' : '0')};
   color: ${color.slateDark};
   font-size: 15px;
   cursor: pointer;
@@ -52,6 +52,7 @@ type Props = {
   icon?: React$Element<*>,
   expand?: boolean,
   expandedContent?: React$Element<*>,
+  hideExpandToggle?: boolean,
   iconColor?: string,
 };
 
@@ -81,25 +82,35 @@ class SidebarLink extends Component {
   };
 
   render() {
-    const { icon, children, onClick, to, expandedContent } = this.props;
+    const {
+      icon,
+      children,
+      onClick,
+      to,
+      expandedContent,
+      expand,
+      hideExpandToggle,
+    } = this.props;
     const Component = to ? StyledNavLink : StyledDiv;
+    const showExpandIcon = expandedContent && !hideExpandToggle;
 
     return (
       <Flex column>
         <Component
+          iconVisible={showExpandIcon}
           activeStyle={activeStyle}
-          hasChildren={expandedContent}
           onClick={onClick}
           to={to}
           exact
         >
           {icon && <IconWrapper>{icon}</IconWrapper>}
-          {expandedContent && (
+          {showExpandIcon && (
             <StyledGoTo expanded={this.expanded} onClick={this.handleClick} />
           )}
           <Content onClick={this.handleExpand}>{children}</Content>
         </Component>
-        {this.expanded && expandedContent}
+        {/* Collection */ expand && hideExpandToggle && expandedContent}
+        {/* Document */ this.expanded && !hideExpandToggle && expandedContent}
       </Flex>
     );
   }