Mobile Responsive Styles (#580)

* WIP: Responsive styles

* Flip breakpoints, ensure doc doesn't spread

* Add MenuIcon

* Refactor Sidebar to share mobile responsive styles

* Fix accidental find/replace

* Tweak padding to take into account icon spacing

app/components/Sidebar/Main.js

@@ -0,0 +1,83 @@
+// @flow
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import type { Location } from 'react-router-dom';
+import { observer, inject } from 'mobx-react';
+import Flex from 'shared/components/Flex';
+
+import AccountMenu from 'menus/AccountMenu';
+import Sidebar, { Section } from './Sidebar';
+import Scrollable from 'components/Scrollable';
+import HomeIcon from 'components/Icon/HomeIcon';
+import SearchIcon from 'components/Icon/SearchIcon';
+import StarredIcon from 'components/Icon/StarredIcon';
+import Collections from './components/Collections';
+import SidebarLink from './components/SidebarLink';
+import HeaderBlock from './components/HeaderBlock';
+
+import AuthStore from 'stores/AuthStore';
+import UiStore from 'stores/UiStore';
+
+type Props = {
+  history: Object,
+  location: Location,
+  auth: AuthStore,
+  ui: UiStore,
+};
+
+@observer
+class MainSidebar extends Component {
+  props: Props;
+
+  handleCreateCollection = () => {
+    this.props.ui.setActiveModal('collection-new');
+  };
+
+  handleEditCollection = () => {
+    this.props.ui.setActiveModal('collection-edit');
+  };
+
+  render() {
+    const { auth } = this.props;
+    const { user, team } = auth;
+    if (!user || !team) return;
+
+    return (
+      <Sidebar>
+        <AccountMenu
+          label={
+            <HeaderBlock
+              subheading={user.name}
+              teamName={team.name}
+              logoUrl={team.avatarUrl}
+            />
+          }
+        />
+        <Flex auto column>
+          <Scrollable>
+            <Section>
+              <SidebarLink to="/dashboard" icon={<HomeIcon />}>
+                Home
+              </SidebarLink>
+              <SidebarLink to="/search" icon={<SearchIcon />}>
+                Search
+              </SidebarLink>
+              <SidebarLink to="/starred" icon={<StarredIcon />}>
+                Starred
+              </SidebarLink>
+            </Section>
+            <Section>
+              <Collections
+                history={this.props.history}
+                location={this.props.location}
+                onCreateCollection={this.handleCreateCollection}
+              />
+            </Section>
+          </Scrollable>
+        </Flex>
+      </Sidebar>
+    );
+  }
+}
+
+export default withRouter(inject('user', 'auth', 'ui')(MainSidebar));

app/components/Sidebar/Settings.js

@@ -1,12 +1,9 @@
 // @flow
 import React, { Component } from 'react';
-import { withRouter } from 'react-router-dom';
-import type { Location } from 'react-router-dom';
-import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import Flex from 'shared/components/Flex';
-import { color, layout } from 'shared/styles/constants';
 
+import Sidebar, { Section } from './Sidebar';
 import Scrollable from 'components/Scrollable';
 import ProfileIcon from 'components/Icon/ProfileIcon';
 import SettingsIcon from 'components/Icon/SettingsIcon';
@@ -19,12 +16,11 @@ import AuthStore from 'stores/AuthStore';
 
 type Props = {
   history: Object,
-  location: Location,
   auth: AuthStore,
 };
 
 @observer
-class Sidebar extends Component {
+class SettingsSidebar extends Component {
   props: Props;
 
   returnToDashboard = () => {
@@ -36,7 +32,7 @@ class Sidebar extends Component {
     if (!team) return;
 
     return (
-      <Container column>
+      <Sidebar>
         <HeaderBlock
           subheading="◄ Return to Dashboard"
           teamName={team.name}
@@ -69,26 +65,9 @@ class Sidebar extends Component {
             </Section>
           </Scrollable>
         </Flex>
-      </Container>
+      </Sidebar>
     );
   }
 }
 
-const Container = styled(Flex)`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: ${layout.sidebarWidth};
-  background: ${color.smoke};
-  transition: left 200ms ease-in-out;
-`;
-
-const Section = styled(Flex)`
-  flex-direction: column;
-  margin: 24px 0;
-  padding: 0 24px;
-  position: relative;
-`;
-
-export default withRouter(inject('auth')(Sidebar));
+export default inject('auth')(SettingsSidebar);

app/components/Sidebar/Sidebar.js

@@ -3,23 +3,18 @@ import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
 import { observer, inject } from 'mobx-react';
 import Flex from 'shared/components/Flex';
 import { color, layout } from 'shared/styles/constants';
 
-import AccountMenu from 'menus/AccountMenu';
-import Scrollable from 'components/Scrollable';
-import HomeIcon from 'components/Icon/HomeIcon';
-import SearchIcon from 'components/Icon/SearchIcon';
-import StarredIcon from 'components/Icon/StarredIcon';
-import Collections from './components/Collections';
-import SidebarLink from './components/SidebarLink';
-import HeaderBlock from './components/HeaderBlock';
-
+import CloseIcon from 'components/Icon/CloseIcon';
+import MenuIcon from 'components/Icon/MenuIcon';
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
 
 type Props = {
+  children: React.Element<any>,
   history: Object,
   location: Location,
   auth: AuthStore,
@@ -30,53 +25,32 @@ type Props = {
 class Sidebar extends Component {
   props: Props;
 
-  handleCreateCollection = () => {
-    this.props.ui.setActiveModal('collection-new');
+  componentWillReceiveProps = (nextProps: Props) => {
+    if (this.props.location !== nextProps.location) {
+      this.props.ui.hideMobileSidebar();
+    }
   };
 
-  handleEditCollection = () => {
-    this.props.ui.setActiveModal('collection-edit');
+  toggleSidebar = () => {
+    this.props.ui.toggleMobileSidebar();
   };
 
   render() {
-    const { auth, ui } = this.props;
-    const { user, team } = auth;
-    if (!user || !team) return;
+    const { children, ui } = this.props;
 
     return (
-      <Container column editMode={ui.editMode}>
-        <AccountMenu
-          label={
-            <HeaderBlock
-              subheading={user.name}
-              teamName={team.name}
-              logoUrl={team.avatarUrl}
-            />
-          }
-        />
-
-        <Flex auto column>
-          <Scrollable>
-            <Section>
-              <SidebarLink to="/dashboard" icon={<HomeIcon />}>
-                Home
-              </SidebarLink>
-              <SidebarLink to="/search" icon={<SearchIcon />}>
-                Search
-              </SidebarLink>
-              <SidebarLink to="/starred" icon={<StarredIcon />}>
-                Starred
-              </SidebarLink>
-            </Section>
-            <Section>
-              <Collections
-                history={this.props.history}
-                location={this.props.location}
-                onCreateCollection={this.handleCreateCollection}
-              />
-            </Section>
-          </Scrollable>
-        </Flex>
+      <Container
+        editMode={ui.editMode}
+        mobileSidebarVisible={ui.mobileSidebarVisible}
+        column
+      >
+        <Toggle
+          onClick={this.toggleSidebar}
+          mobileSidebarVisible={ui.mobileSidebarVisible}
+        >
+          {ui.mobileSidebarVisible ? <CloseIcon /> : <MenuIcon />}
+        </Toggle>
+        {children}
       </Container>
     );
   }
@@ -87,21 +61,41 @@ const Container = styled(Flex)`
   top: 0;
   bottom: 0;
   left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
-  width: ${layout.sidebarWidth};
+  width: 100%;
   background: ${color.smoke};
   transition: left 200ms ease-in-out;
+  margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
+  z-index: 1;
 
   @media print {
     display: none;
     left: 0;
   }
+
+  ${breakpoint('tablet')`
+    width: ${layout.sidebarWidth};
+    margin: 0;
+  `};
 `;
 
-const Section = styled(Flex)`
+export const Section = styled(Flex)`
   flex-direction: column;
   margin: 24px 0;
   padding: 0 24px;
   position: relative;
 `;
 
-export default withRouter(inject('user', 'auth', 'ui')(Sidebar));
+const Toggle = styled.a`
+  position: fixed;
+  top: 0;
+  left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)};
+  right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')};
+  z-index: 1;
+  margin: 16px;
+
+  ${breakpoint('tablet')`
+    display: none;
+  `};
+`;
+
+export default withRouter(inject('ui')(Sidebar));

app/components/Sidebar/index.js

@@ -1,3 +1,3 @@
 // @flow
-import Sidebar from './Sidebar';
+import Sidebar from './Main';
 export default Sidebar;