Improved sidebar selected styling, simplified logic and css

app/components/Sidebar/Main.js

@@ -7,8 +7,9 @@ import { HomeIcon, EditIcon, SearchIcon, StarredIcon } from 'outline-icons';
 
 import Flex from 'shared/components/Flex';
 import AccountMenu from 'menus/AccountMenu';
-import Sidebar, { Section } from './Sidebar';
+import Sidebar from './Sidebar';
 import Scrollable from 'components/Scrollable';
+import Section from './components/Section';
 import Collections from './components/Collections';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
@@ -56,24 +57,31 @@ class MainSidebar extends React.Component<Props> {
         <Flex auto column>
           <Scrollable shadow>
             <Section>
-              <SidebarLink to="/dashboard" icon={<HomeIcon />} exact={false}>
-                Home
-              </SidebarLink>
-              <SidebarLink to="/search" icon={<SearchIcon />}>
-                Search
-              </SidebarLink>
-              <SidebarLink to="/starred" icon={<StarredIcon />} exact={false}>
-                Starred
-              </SidebarLink>
+              <SidebarLink
+                to="/dashboard"
+                icon={<HomeIcon />}
+                exact={false}
+                label="Home"
+              />
+              <SidebarLink to="/search" icon={<SearchIcon />} label="Search" />
+              <SidebarLink
+                to="/starred"
+                icon={<StarredIcon />}
+                exact={false}
+                label="Starred"
+              />
               <SidebarLink
                 to="/drafts"
                 icon={<EditIcon />}
                 active={
                   documents.active ? !documents.active.publishedAt : undefined
                 }
-              >
-                Drafts <Bubble count={documents.drafts.length} />
-              </SidebarLink>
+                label={
+                  <React.Fragment>
+                    Drafts <Bubble count={documents.drafts.length} />
+                  </React.Fragment>
+                }
+              />
             </Section>
             <Section>
               <Collections

app/components/Sidebar/Settings.js

@@ -15,8 +15,9 @@ import ZapierIcon from './icons/Zapier';
 import SlackIcon from './icons/Slack';
 
 import Flex from 'shared/components/Flex';
-import Sidebar, { Section } from './Sidebar';
+import Sidebar from './Sidebar';
 import Scrollable from 'components/Scrollable';
+import Section from './components/Section';
 import Header from './components/Header';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
@@ -50,42 +51,55 @@ class SettingsSidebar extends React.Component<Props> {
           <Scrollable shadow>
             <Section>
               <Header>Account</Header>
-              <SidebarLink to="/settings" icon={<ProfileIcon />}>
-                Profile
-              </SidebarLink>
-              <SidebarLink to="/settings/notifications" icon={<EmailIcon />}>
-                Notifications
-              </SidebarLink>
-              <SidebarLink to="/settings/tokens" icon={<CodeIcon />}>
-                API Tokens
-              </SidebarLink>
+              <SidebarLink
+                to="/settings"
+                icon={<ProfileIcon />}
+                label="Profile"
+              />
+              <SidebarLink
+                to="/settings/notifications"
+                icon={<EmailIcon />}
+                label="Notifications"
+              />
+              <SidebarLink
+                to="/settings/tokens"
+                icon={<CodeIcon />}
+                label="API Tokens"
+              />
             </Section>
             <Section>
               <Header>Team</Header>
               {user.isAdmin && (
-                <SidebarLink to="/settings/details" icon={<TeamIcon />}>
-                  Details
-                </SidebarLink>
+                <SidebarLink
+                  to="/settings/details"
+                  icon={<TeamIcon />}
+                  label="Details"
+                />
               )}
               {user.isAdmin && (
-                <SidebarLink to="/settings/security" icon={<PadlockIcon />}>
-                  Security
-                </SidebarLink>
+                <SidebarLink
+                  to="/settings/security"
+                  icon={<PadlockIcon />}
+                  label="Security"
+                />
               )}
               <SidebarLink
                 to="/settings/people"
                 icon={<UserIcon />}
                 exact={false}
-              >
-                People
-              </SidebarLink>
-              <SidebarLink to="/settings/shares" icon={<LinkIcon />}>
-                Share Links
-              </SidebarLink>
+                label="People"
+              />
+              <SidebarLink
+                to="/settings/shares"
+                icon={<LinkIcon />}
+                label="Share Links"
+              />
               {user.isAdmin && (
-                <SidebarLink to="/settings/export" icon={<DocumentIcon />}>
-                  Export Data
-                </SidebarLink>
+                <SidebarLink
+                  to="/settings/export"
+                  icon={<DocumentIcon />}
+                  label="Export Data"
+                />
               )}
             </Section>
             {user.isAdmin && (
@@ -94,15 +108,13 @@ class SettingsSidebar extends React.Component<Props> {
                 <SidebarLink
                   to="/settings/integrations/slack"
                   icon={<SlackIcon />}
-                >
-                  Slack
-                </SidebarLink>
+                  label="Slack"
+                />
                 <SidebarLink
                   to="/settings/integrations/zapier"
                   icon={<ZapierIcon />}
-                >
-                  Zapier
-                </SidebarLink>
+                  label="Zapier"
+                />
               </Section>
             )}
           </Scrollable>

app/components/Sidebar/Sidebar.js

@@ -88,13 +88,6 @@ const Container = styled(Flex)`
   `};
 `;
 
-export const Section = styled(Flex)`
-  flex-direction: column;
-  margin: 24px 0;
-  padding: 0 24px;
-  position: relative;
-`;
-
 const Toggle = styled.a`
   position: fixed;
   top: 0;

app/components/Sidebar/components/Bubble.js

@@ -18,9 +18,11 @@ const Wrapper = styled.div`
   color: ${props => props.theme.white};
   background: ${props => props.theme.slateDark};
   display: inline-block;
-  min-width: 15px;
-  padding: 0 5px;
+  font-feature-settings: "tnum";
+  font-weight: 500;
   font-size: 10px;
+  min-width: 15px;
+  padding: 0 4px;
   position: relative;
   top: -2px;
   left: 2px;

app/components/Sidebar/components/CollectionLink.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 import { CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
-import styled from 'styled-components';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
 import CollectionMenu from 'menus/CollectionMenu';
@@ -56,23 +55,10 @@ class CollectionLink extends React.Component<Props> {
             )
           }
           iconColor={collection.color}
-          expand={expanded}
-          hideExpandToggle
+          expanded={expanded}
+          hideDisclosure
           menuOpen={this.menuOpen}
-          expandedContent={
-            <CollectionChildren column>
-              {collection.documents.map(document => (
-                <DocumentLink
-                  key={document.id}
-                  history={history}
-                  document={document}
-                  activeDocument={activeDocument}
-                  prefetchDocument={prefetchDocument}
-                  depth={0}
-                />
-              ))}
-            </CollectionChildren>
-          }
+          label={collection.name}
           menu={
             <CollectionMenu
               history={history}
@@ -82,23 +68,22 @@ class CollectionLink extends React.Component<Props> {
             />
           }
         >
-          <CollectionName justify="space-between">
-            {collection.name}
-          </CollectionName>
+          <Flex column>
+            {collection.documents.map(document => (
+              <DocumentLink
+                key={document.id}
+                history={history}
+                document={document}
+                activeDocument={activeDocument}
+                prefetchDocument={prefetchDocument}
+                depth={1.5}
+              />
+            ))}
+          </Flex>
         </SidebarLink>
       </DropToImport>
     );
   }
 }
 
-const CollectionName = styled(Flex)`
-  padding: 0 0 4px;
-`;
-
-const CollectionChildren = styled(Flex)`
-  margin-top: -4px;
-  margin-left: 36px;
-  padding-bottom: 4px;
-`;
-
 export default CollectionLink;

app/components/Sidebar/components/Collections.js

@@ -50,9 +50,8 @@ class Collections extends React.Component<Props> {
         <SidebarLink
           onClick={this.props.onCreateCollection}
           icon={<PlusIcon />}
-        >
-          New collection…
-        </SidebarLink>
+          label="New collection…"
+        />
       </Flex>
     );
 

app/components/Sidebar/components/DocumentLink.js

@@ -46,6 +46,7 @@ class DocumentLink extends React.Component<Props> {
         .includes(document.id) ||
         isActiveDocument)
     );
+    const hasChildren = !!document.children.length;
 
     return (
       <Flex
@@ -64,27 +65,24 @@ class DocumentLink extends React.Component<Props> {
               pathname: document.url,
               state: { title: document.title },
             }}
-            expand={showChildren}
-            expandedContent={
-              document.children.length ? (
-                <DocumentChildren column>
-                  {document.children.map(childDocument => (
-                    <DocumentLink
-                      key={childDocument.id}
-                      history={history}
-                      document={childDocument}
-                      activeDocument={activeDocument}
-                      prefetchDocument={prefetchDocument}
-                      depth={depth + 1}
-                    />
-                  ))}
-                </DocumentChildren>
-              ) : (
-                undefined
-              )
-            }
+            expanded={showChildren}
+            label={document.title}
+            depth={depth}
           >
-            {document.title}
+            {hasChildren && (
+              <DocumentChildren column>
+                {document.children.map(childDocument => (
+                  <DocumentLink
+                    key={childDocument.id}
+                    history={history}
+                    document={childDocument}
+                    activeDocument={activeDocument}
+                    prefetchDocument={prefetchDocument}
+                    depth={depth + 1}
+                  />
+                ))}
+              </DocumentChildren>
+            )}
           </SidebarLink>
         </DropToImport>
       </Flex>
@@ -92,9 +90,6 @@ class DocumentLink extends React.Component<Props> {
   }
 }
 
-const DocumentChildren = styled(Flex)`
-  margin-top: -4px;
-  margin-left: 12px;
-`;
+const DocumentChildren = styled(Flex)``;
 
 export default DocumentLink;

app/components/Sidebar/components/Header.js

@@ -8,7 +8,7 @@ const Header = styled(Flex)`
   text-transform: uppercase;
   color: ${props => props.theme.slateDark};
   letter-spacing: 0.04em;
-  margin-bottom: 4px;
+  margin: 4px 16px;
 `;
 
 export default Header;

app/components/Sidebar/components/Section.js

@@ -0,0 +1,11 @@
+// @flow
+import styled from 'styled-components';
+import Flex from 'shared/components/Flex';
+
+const Section = styled(Flex)`
+  position: relative;
+  flex-direction: column;
+  margin: 24px 8px;
+`;
+
+export default Section;

app/components/Sidebar/components/SidebarLink.js

@@ -7,78 +7,52 @@ import { CollapsedIcon } from 'outline-icons';
 import styled, { withTheme } from 'styled-components';
 import Flex from 'shared/components/Flex';
 
-const StyledGoTo = styled(CollapsedIcon)`
-  margin-bottom: -4px;
-  margin-left: 1px;
-  margin-right: -3px;
-  ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'};
-`;
-
-const IconWrapper = styled.span`
-  margin-left: -4px;
-  margin-right: 4px;
-  height: 24px;
-`;
-
-const StyledNavLink = styled(NavLink)`
-  display: flex;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 4px 0;
-  margin-left: ${props => (props.icon ? '-20px;' : '0')};
-  color: ${props => props.theme.slateDark};
-  font-size: 15px;
-  cursor: pointer;
-
-  &:hover {
-    color: ${props => props.theme.text};
-  }
-`;
-
 type Props = {
   to?: string | Object,
   onClick?: (SyntheticEvent<*>) => *,
   children?: React.Node,
   icon?: React.Node,
-  expand?: boolean,
-  expandedContent?: React.Node,
+  expanded?: boolean,
+  label?: React.Node,
   menu?: React.Node,
   menuOpen?: boolean,
-  hideExpandToggle?: boolean,
+  hideDisclosure?: boolean,
   iconColor?: string,
   active?: boolean,
   theme: Object,
   exact?: boolean,
+  depth?: number,
 };
 
 @observer
 class SidebarLink extends React.Component<Props> {
-  @observable expanded: boolean = false;
-  activeStyle: Object;
+  @observable expanded: boolean;
 
-  constructor(props) {
-    super(props);
+  style = {
+    paddingLeft: `${(this.props.depth || 0) * 16 + 16}px`,
+  };
 
-    this.activeStyle = {
-      color: props.theme.black,
-      fontWeight: 500,
-    };
-  }
+  activeStyle = {
+    color: this.props.theme.text,
+    background: 'rgba(0, 0, 0, 0.05)',
+    fontWeight: 600,
+    ...this.style,
+  };
 
   componentDidMount() {
-    if (this.props.expand) this.handleExpand();
+    if (this.props.expanded) this.handleExpand();
   }
 
   componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.expand) this.handleExpand();
+    if (nextProps.expanded !== undefined) {
+      this.expanded = nextProps.expanded;
+    }
   }
 
   @action
-  handleClick = (event: SyntheticEvent<*>) => {
-    event.preventDefault();
-    event.stopPropagation();
+  handleClick = (ev: SyntheticEvent<*>) => {
+    ev.preventDefault();
+    ev.stopPropagation();
     this.expanded = !this.expanded;
   };
 
@@ -93,47 +67,69 @@ class SidebarLink extends React.Component<Props> {
       children,
       onClick,
       to,
-      expandedContent,
-      expand,
+      label,
       active,
       menu,
       menuOpen,
-      hideExpandToggle,
+      hideDisclosure,
       exact,
     } = this.props;
-    const showExpandIcon =
-      expandedContent && !hideExpandToggle ? true : undefined;
+    const showDisclosure = !!children && !hideDisclosure;
 
     return (
       <Wrapper menuOpen={menuOpen} column>
         <StyledNavLink
-          icon={showExpandIcon}
           activeStyle={this.activeStyle}
-          style={active ? this.activeStyle : undefined}
+          style={active ? this.activeStyle : this.style}
           onClick={onClick}
           exact={exact !== false}
           to={to}
           as={to ? undefined : 'div'}
         >
           {icon && <IconWrapper>{icon}</IconWrapper>}
-          {showExpandIcon && (
-            <StyledGoTo expanded={this.expanded} onClick={this.handleClick} />
-          )}
-          <Content onClick={this.handleExpand}>{children}</Content>
+          <Label onClick={this.handleExpand}>
+            {showDisclosure && (
+              <Disclosure expanded={this.expanded} onClick={this.handleClick} />
+            )}
+            {label}
+          </Label>
         </StyledNavLink>
-        {/* Collection */ expand && hideExpandToggle && expandedContent}
-        {/* Document */ this.expanded && !hideExpandToggle && expandedContent}
+        {this.expanded && children}
         {menu && <Action>{menu}</Action>}
       </Wrapper>
     );
   }
 }
 
+// accounts for whitespace around icon
+const IconWrapper = styled.span`
+  margin-left: -4px;
+  margin-right: 4px;
+  height: 24px;
+`;
+
+const StyledNavLink = styled(NavLink)`
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 4px 16px;
+  border-radius: 4px;
+  color: ${props => props.theme.slateDark};
+  font-size: 15px;
+  cursor: pointer;
+
+  &:hover {
+    color: ${props => props.theme.text};
+  }
+`;
+
 const Action = styled.span`
   position: absolute;
-  right: 0;
-  top: 2px;
+  top: 4px;
+  right: 4px;
   color: ${props => props.theme.slate};
+
   svg {
     opacity: 0.75;
   }
@@ -159,9 +155,17 @@ const Wrapper = styled(Flex)`
   }
 `;
 
-const Content = styled.div`
+const Label = styled.div`
+  position: relative;
   width: 100%;
-  max-height: 4em;
+  max-height: 4.4em;
+`;
+
+const Disclosure = styled(CollapsedIcon)`
+  position: absolute;
+  left: -24px;
+
+  ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'};
 `;
 
 export default withRouter(withTheme(SidebarLink));