Added sidebar chevrons

frontend/components/Layout/Layout.js

@@ -173,6 +173,7 @@ const Sidebar = styled(Flex)`
 const LinkSection = styled(Flex)`
   flex-direction: column;
   margin: 24px 0;
+  padding: 0 ${layout.hpadding};
   position: relative;
 `;
 

frontend/components/Layout/components/SidebarCollections.js

@@ -87,16 +87,19 @@ type Props = {
                 />
               </CollectionAction>}
           </Flex>
+
           {collection.id === ui.activeCollectionId &&
-            collection.documents.map(document => (
-              <DocumentLink
-                key={document.id}
-                history={history}
-                document={document}
-                activeDocument={activeDocument}
-                depth={0}
-              />
-            ))}
+            <Children column>
+              {collection.documents.map(document => (
+                <DocumentLink
+                  key={document.id}
+                  history={history}
+                  document={document}
+                  activeDocument={activeDocument}
+                  depth={0}
+                />
+              ))}
+            </Children>}
         </SidebarLink>
       </DropToImport>
     );
@@ -111,27 +114,32 @@ type DocumentLinkProps = {
 };
 
 const DocumentLink = observer((props: DocumentLinkProps) => {
-  const { history, document, activeDocument, depth } = props;
-  const canDropToImport = depth === 0;
+  const { document, activeDocument, depth } = props;
+
+  const showChildren =
+    activeDocument &&
+    (activeDocument.pathToDocument
+      .map(entry => entry.id)
+      .includes(document.id) ||
+      activeDocument.id === document.id);
 
   return (
     <Flex column key={document.id}>
-      {canDropToImport &&
-        <DropToImport
-          history={history}
-          documentId={document.id}
-          activeClassName="activeDropZone"
+      <DropToImport
+        history={history}
+        documentId={document.id}
+        activeStyle="activeDropZone"
+      >
+        <SidebarLink
+          to={document.url}
+          hasChildren={document.children.length > 0}
+          expanded={showChildren}
         >
-          <SidebarLink to={document.url}>{document.title}</SidebarLink>
-        </DropToImport>}
-      {!canDropToImport &&
-        <SidebarLink to={document.url}>{document.title}</SidebarLink>}
+          {document.title}
+        </SidebarLink>
+      </DropToImport>
 
-      {activeDocument &&
-        (activeDocument.pathToDocument
-          .map(entry => entry.id)
-          .includes(document.id) ||
-          activeDocument.id === document.id) &&
+      {showChildren &&
         <Children column>
           {document.children &&
             document.children.map(childDocument => (
@@ -139,6 +147,7 @@ const DocumentLink = observer((props: DocumentLinkProps) => {
                 key={childDocument.id}
                 history={history}
                 document={childDocument}
+                activeDocument={activeDocument}
                 depth={depth + 1}
               />
             ))}
@@ -153,7 +162,6 @@ const Header = styled(Flex)`
   text-transform: uppercase;
   color: ${color.slate};
   letter-spacing: 0.04em;
-  padding: 0 24px;
 `;
 
 const CollectionAction = styled.a`

frontend/components/Layout/components/SidebarLink.js

@@ -4,6 +4,9 @@ import { NavLink } from 'react-router-dom';
 import { color, fontWeight } from 'styles/constants';
 import styled from 'styled-components';
 
+import Flex from 'components/Flex';
+import ChevronIcon from 'components/Icon/ChevronIcon';
+
 const activeStyle = {
   color: color.black,
   fontWeight: fontWeight.semiBold,
@@ -14,9 +17,11 @@ const StyleableDiv = props => <div {...props} />;
 
 const styleComponent = component => styled(component)`
   display: block;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 5px 24px;
+  margin: 5px 0;
+  margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
   color: ${color.slateDark};
   font-size: 15px;
   cursor: pointer;
@@ -24,11 +29,37 @@ const styleComponent = component => styled(component)`
   &:hover {
     color: ${color.text};
   }
+
+  &.active svg {
+    fill: ${activeStyle.color};
+  }
 `;
 
 function SidebarLink(props: Object) {
   const Component = styleComponent(props.to ? NavLink : StyleableDiv);
-  return <Component exact activeStyle={activeStyle} {...props} />;
+
+  return (
+    <Flex>
+      <Component exact activeStyle={activeStyle} {...props}>
+        {props.hasChildren && <StyledChevron expanded={props.expanded} />}
+        {props.children}
+      </Component>
+    </Flex>
+  );
 }
 
+const StyledChevron = styled(ChevronIcon)`
+  margin-right: -10px;
+
+  svg {
+    height: 18px;
+    margin-bottom: -4px;
+    margin-right: 6px;
+
+    fill: ${color.slateDark};
+
+    ${({ expanded }) => expanded && 'transform: rotate(90deg);'}
+  }
+`;
+
 export default SidebarLink;