WIP: Dashboard tabs

app/components/DocumentPreview/components/PublishingInfo.js

@@ -24,7 +24,13 @@ type Props = {
 };
 
 function PublishingInfo({ collection, document }: Props) {
-  const { modifiedSinceViewed, updatedAt, updatedBy, publishedAt } = document;
+  const {
+    modifiedSinceViewed,
+    updatedAt,
+    updatedBy,
+    publishedAt,
+    isDraft,
+  } = document;
 
   return (
     <Container align="center">
@@ -35,20 +41,20 @@ function PublishingInfo({ collection, document }: Props) {
       ) : (
         <React.Fragment>
           {updatedBy.name}
-          {publishedAt ? (
-            <Modified highlight={modifiedSinceViewed}>
-              &nbsp;modified <Time dateTime={updatedAt} /> ago
-            </Modified>
-          ) : (
+          {isDraft ? (
             <span>
               &nbsp;saved <Time dateTime={updatedAt} /> ago
             </span>
+          ) : (
+            <Modified highlight={modifiedSinceViewed}>
+              &nbsp;modified <Time dateTime={updatedAt} /> ago
+            </Modified>
           )}
         </React.Fragment>
       )}
       {collection && (
         <span>
-          &nbsp;in <strong>{collection.name}</strong>
+          &nbsp;in <strong>{isDraft ? 'Drafts' : collection.name}</strong>
         </span>
       )}
     </Container>

app/components/Sidebar/Main.js

@@ -56,7 +56,7 @@ class MainSidebar extends React.Component<Props> {
         <Flex auto column>
           <Scrollable shadow>
             <Section>
-              <SidebarLink to="/dashboard" icon={<HomeIcon />}>
+              <SidebarLink to="/dashboard" icon={<HomeIcon />} exact={false}>
                 Home
               </SidebarLink>
               <SidebarLink to="/search" icon={<SearchIcon />}>

app/components/Sidebar/components/SidebarLink.js

@@ -52,6 +52,7 @@ type Props = {
   iconColor?: string,
   active?: boolean,
   theme: Object,
+  exact?: boolean,
 };
 
 @observer
@@ -100,6 +101,7 @@ class SidebarLink extends React.Component<Props> {
       menu,
       menuOpen,
       hideExpandToggle,
+      exact,
     } = this.props;
     const Component = to ? StyledNavLink : StyledDiv;
     const showExpandIcon =
@@ -113,7 +115,7 @@ class SidebarLink extends React.Component<Props> {
           style={active ? this.activeStyle : undefined}
           onClick={onClick}
           to={to}
-          exact
+          exact={exact !== false}
         >
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {showExpandIcon && (

app/components/Tab.js

@@ -0,0 +1,26 @@
+// @flow
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+import { NavLink } from 'react-router-dom';
+
+const NavItem = styled(NavLink)`
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: ${props => props.theme.slate};
+  letter-spacing: 0.04em;
+  margin-right: 20px;
+  padding-bottom: 8px;
+`;
+
+function Tab(props: *) {
+  const activeStyle = {
+    paddingBottom: '5px',
+    borderBottom: `3px solid ${props.theme.slateLight}`,
+  };
+
+  return <NavItem {...props} activeStyle={activeStyle} />;
+}
+
+export default withTheme(Tab);

app/components/Tabs.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+
+const Tabs = styled.nav`
+  border-bottom: 1px solid ${props => props.theme.slateLight};
+  margin-top: 22px;
+  margin-bottom: 10px;
+`;
+
+export default Tabs;