Closes #146

frontend/components/Layout/Layout.js

@@ -35,16 +35,12 @@ type Props = {
   title?: ?React.Element<any>,
   auth: AuthStore,
   ui: UiStore,
-  search: ?boolean,
   notifications?: React.Element<any>,
 };
 
 @observer class Layout extends React.Component {
   props: Props;
-
-  static defaultProps = {
-    search: true,
-  };
+  scrollable: ?HTMLDivElement;
 
   @keydown(['/', 't'])
   goToSearch(ev) {
@@ -81,6 +77,20 @@ type Props = {
     this.props.ui.setActiveModal('collection-edit');
   };
 
+  setScrollableRef = ref => {
+    this.scrollable = ref;
+  };
+
+  scrollToActiveDocument = ref => {
+    const scrollable = this.scrollable;
+    if (!ref || !scrollable) return;
+
+    const container = scrollable.getBoundingClientRect();
+    const bounds = ref.getBoundingClientRect();
+    const scrollTop = bounds.top + container.top;
+    scrollable.scrollTop = scrollTop;
+  };
+
   render() {
     const { auth, documents, ui } = this.props;
     const { user, team } = auth;
@@ -115,7 +125,7 @@ type Props = {
               />
 
               <Flex auto column>
-                <Scrollable>
+                <Scrollable innerRef={this.setScrollableRef}>
                   <LinkSection>
                     <SidebarLink to="/dashboard">
                       <Icon type="Home" /> Home
@@ -132,6 +142,7 @@ type Props = {
                       history={this.props.history}
                       activeDocument={documents.active}
                       onCreateCollection={this.handleCreateCollection}
+                      activeDocumentRef={this.scrollToActiveDocument}
                     />
                   </LinkSection>
                 </Scrollable>

frontend/components/Layout/components/SidebarCollections.js

@@ -20,7 +20,8 @@ type Props = {
   history: Object,
   collections: CollectionsStore,
   activeDocument: ?Document,
-  onCreateCollection: Function,
+  onCreateCollection: () => void,
+  activeDocumentRef: HTMLElement => void,
   ui: UiStore,
 };
 
@@ -28,7 +29,13 @@ type Props = {
   props: Props;
 
   render() {
-    const { history, collections, activeDocument, ui } = this.props;
+    const {
+      history,
+      collections,
+      activeDocument,
+      ui,
+      activeDocumentRef,
+    } = this.props;
 
     return (
       <Flex column>
@@ -39,6 +46,7 @@ type Props = {
             history={history}
             collection={collection}
             activeDocument={activeDocument}
+            activeDocumentRef={activeDocumentRef}
             ui={ui}
           />
         ))}
@@ -62,7 +70,13 @@ type Props = {
   };
 
   render() {
-    const { history, collection, activeDocument, ui } = this.props;
+    const {
+      history,
+      collection,
+      activeDocument,
+      ui,
+      activeDocumentRef,
+    } = this.props;
 
     return (
       <StyledDropToImport
@@ -94,6 +108,7 @@ type Props = {
               {collection.documents.map(document => (
                 <DocumentLink
                   key={document.id}
+                  activeDocumentRef={activeDocumentRef}
                   history={history}
                   document={document}
                   activeDocument={activeDocument}
@@ -111,21 +126,32 @@ type DocumentLinkProps = {
   document: NavigationNode,
   history: Object,
   activeDocument: ?Document,
+  activeDocumentRef: HTMLElement => void,
   depth: number,
 };
 
-const DocumentLink = observer((props: DocumentLinkProps) => {
-  const { document, activeDocument, depth } = props;
-
+const DocumentLink = observer(
+  ({
+    document,
+    activeDocument,
+    activeDocumentRef,
+    depth,
+  }: DocumentLinkProps) => {
+    const isActiveDocument =
+      activeDocument && activeDocument.id === document.id;
     const showChildren =
       activeDocument &&
       (activeDocument.pathToDocument
         .map(entry => entry.id)
         .includes(document.id) ||
-      activeDocument.id === document.id);
+        isActiveDocument);
 
     return (
-    <Flex column key={document.id}>
+      <Flex
+        column
+        key={document.id}
+        innerRef={isActiveDocument ? activeDocumentRef : undefined}
+      >
         <DropToImport
           history={history}
           documentId={document.id}
@@ -155,7 +181,8 @@ const DocumentLink = observer((props: DocumentLinkProps) => {
           </Children>}
       </Flex>
     );
-});
+  }
+);
 
 const CollectionAction = styled.a`
   color: ${color.slate};

frontend/components/Layout/components/SidebarLink.js

@@ -20,7 +20,7 @@ const styleComponent = component => styled(component)`
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin: 5px 0;
+  padding: 5px 0;
   margin-left: ${({ hasChildren }) => (hasChildren ? '-20px;' : '0')};
   color: ${color.slateDark};
   font-size: 15px;

frontend/components/Scrollable/Scrollable.js

@@ -1,18 +1,11 @@
 // @flow
-import React, { Component } from 'react';
 import styled from 'styled-components';
 
-const Scroll = styled.div`
+const Scrollable = styled.div`
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
 `;
 
-class Scrollable extends Component {
-  render() {
-    return <Scroll {...this.props} />;
-  }
-}
-
 export default Scrollable;