styled-components · kitten · Sep 25, 2017 · Sep 2, 2017 · Sep 2, 2017 · Sep 2, 2017
diff --git a/components/DocsLayout.js b/components/DocsLayout.js
@@ -1,27 +1,65 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Head from './SeoHead'
-import Navbar from './Navbar'
+import Nav from './Nav'
 import { Container, Content, Title } from './Layout'
 
-const DocsLayout = ({ children, title="", description="" }) => (
-  <Container>
 
-    <Head
-      title={`styled-components${title ? `: ${title}` : ''}`}
-      description={description}>
-        <meta name="robots" content="noodp" />
-    </Head>
+class DocsLayout extends Component {
+  state = {
+    isSideFolded: true
+  }
 
-    <Navbar />
+  static defaultProps = {
+    title: '',
+    description: '',
+  }
 
-    <Content>
-      <Title>
-        {title}
-      </Title>
+  onSideFold = () => {
+    let isSideFolded = !this.state.isSideFolded
+    if(!isSideFolded) {
+      document.body.classList.add('sticky')
+    } else {
+      document.body.classList.remove('sticky')
+    }
+    this.setState({
+      isSideFolded: isSideFolded
+    })
+  }
+
+  onRouteChange = () => {
+    this.setState({ isSideFolded: true })
+  }
+
+  render() {
+    const { children, title, description } = this.props
+    const { isSideFolded } = this.state
+
+    return (
+      <Container>
+
+        <Head
+          title={`styled-components${title ? `: ${title}` : ''}`}
+          description={description}>
+            <meta name="robots" content="noodp" />
+        </Head>
+
+        <Nav
+          isSideFolded={isSideFolded}
+          onSideFold={this.onSideFold}
+          onRouteChange={this.onRouteChange}
+        />
+
+        <Content moveRight={!isSideFolded}>
+          <Title>
+            {title}
+          </Title>
+
+          {children}
+        </Content>
+      </Container>
+    )
+  }
+}
 
-      {children}
-    </Content>
-  </Container>
-)
 
 export default DocsLayout
diff --git a/components/Layout.js b/components/Layout.js
@@ -1,27 +1,32 @@
 import styled, { css } from 'styled-components'
 import rem from '../utils/rem'
 import { mobile } from '../utils/media'
+import { sidebarWidth } from '../utils/sizes'
 import { bodyFont, headerFont } from '../utils/fonts'
 
 export const Container = styled.div`
-  padding-left: ${rem(300)};
+  padding-left: ${rem(sidebarWidth)};
 
   ${mobile(css`
     padding-left: 0;
-    padding-top: ${rem(70)};
   `)}
 `
 
 export const Content = styled.div`
   width: ${rem(1024)};
   max-width: 100%;
   margin: 0 auto;
-  padding: ${rem(50)} ${rem(40)} ${rem(30)} ${rem(40)};
+  padding: ${rem(90)} ${rem(40)} ${rem(30)} ${rem(40)};
   box-sizing: border-box;
   font-family: ${bodyFont};
+  transition: transform 150ms ease-out;
 
   ${mobile(css`
-    padding: ${rem(30)} ${rem(20)};
+    padding: ${rem(70)} ${rem(20)} ${rem(30)} ${rem(20)};
+
+    ${p => p.moveRight && css`
+      transform: translateX(${rem(sidebarWidth)});
+    `}
   `)}
 `
 

diff --git a/components/Navbar/Logo.js → components/Nav/Logo.js b/components/Navbar/Logo.js → components/Nav/Logo.js
@@ -1,25 +1,24 @@
 import styled, { css } from 'styled-components'
 
 import rem from '../../utils/rem'
-import { mobile } from '../../utils/media'
 
 const Logo = styled.div`
   display: inline-block;
-  width: 100%;
-  height: 100%;
-
+  vertical-align: middle;
   box-sizing: border-box;
 
-  background-image: url(/static/logo.png);
-  background-size: contain;
   background-position: center;
+  background-size: contain;
 
-  ${mobile(css`
+  ${p => p.compact ? css`
     background-image: url(/static/icon.png);
-    background-position: center;
-    width: ${rem(70)};
-    height: ${rem(70)};
-  `)}
+    width: ${rem(100)};
+    height: ${rem(30)};
+  ` : css`
+    background-image: url(/static/nav-logo.png);
+    width: ${rem(164)};
+    height: ${rem(40)};
+  `}
 `
 
 export default Logo
diff --git a/components/Nav/MobileNavbar.js b/components/Nav/MobileNavbar.js
@@ -0,0 +1,154 @@
+import React, { PureComponent } from 'react'
+import styled, { css } from 'styled-components'
+
+import rem from '../../utils/rem'
+import { navbarHeight } from '../../utils/sizes'
+import { paleGrey } from '../../utils/colors'
+import { mobile } from '../../utils/media'
+import Link from '../Link'
+import NavLinks from './NavLinks'
+import Social from './Social'
+import Search from './Search'
+import Logo from './Logo'
+import NavSeparator from './NavSeparator'
+import NavButton from './NavButton'
+
+const Wrapper = styled.div`
+  display: none;
+
+  ${mobile(css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: ${rem(navbarHeight)};
+  `)}
+`
+
+const SecondaryMenu = styled.div`
+  position: absolute;
+  top: ${rem(navbarHeight)};
+  left: 0;
+  right: 0;
+
+  ${p => p.open ? css`
+    height: ${rem(navbarHeight)};
+  ` : css`
+    height: 0;
+  `}
+
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${rem(20)};
+  transition: height 0.1s;
+
+  -webkit-user-select: none;
+  -webkit-overflow-scrolling: touch;
+  overflow-x: scroll;
+  overflow-y: hidden;
+
+  background: ${paleGrey};
+  color: #868686;
+`
+
+const LogoLink = styled(Link).attrs({
+  unstyled: true,
+  href: '/',
+})`
+  display: inline-block;
+  vertical-align: center;
+  margin-right: ${rem(35)};
+`
+
+const ArrowWrapper = styled.div`
+  transition: transform 0.1s;
+
+  ${p => p.rotate && css`
+    transform-origin: 50% 55%;
+    transform: rotate(180deg);
+  `}
+`
+
+const PaddedSocial = styled(Social)`
+  padding-right: ${rem(20)};
+`
+
+const CloseIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>close</title>
+    <use fill="#FFF" xlinkHref="#close" transform="translate(1 1)" />
+    <defs>
+      <path id="close" d="M-.7.7l13 13 1.4-1.4-13-13L-.7.7zm13-1.4l-13 13 1.4 1.4 13-13-1.4-1.4z"/>
+    </defs>
+  </svg>
+)
+
+const FoldIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="14" xmlnsXlink="http://www.w3.org/1999/xlink">
+    <title>fold</title>
+    <use fill="#FFF" xlinkHref="#fold" transform="translate(0 1)"/>
+    <defs>
+      <path id="fold" d="M0 1h17v-2H0v2zm17 4H0v2h17V5zM0 13h17v-2H0v2z"/>
+    </defs>
+  </svg>
+)
+
+const ArrowIcon = props => (
+  <ArrowWrapper {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>arrow down</title>
+      <use fill="#FFF" xlinkHref="#menuArrow" transform="translate(1 1)"/>
+      <defs>
+        <path id="menuArrow" d="M5 5l-.7.7.7.7.7-.7L5 5zM9.3-.7l-5 5 1.4 1.4 5-5L9.3-.7zm-3.6 5l-5-5L-.7.7l5 5 1.4-1.4z"/>
+      </defs>
+    </svg>
+  </ArrowWrapper>
+)
+
+class MobileNavbar extends PureComponent {
+  state = {
+    isMenuOpen: false,
+  }
+
+  render() {
+    const { isMenuOpen } = this.state
+    const { isFolded, onFold } = this.props
+
+    return (
+      <Wrapper>
+        <NavButton
+          active={!isFolded}
+          onClick={onFold}
+        >
+          {isFolded ? <FoldIcon /> : <CloseIcon />}
+        </NavButton>
+
+        <LogoLink>
+          <Logo compact />
+        </LogoLink>
+
+        <NavButton
+          onClick={this.toggleMenu}
+          active={isMenuOpen}
+        >
+          <ArrowIcon rotate={isMenuOpen} />
+        </NavButton>
+
+        <SecondaryMenu open={isMenuOpen}>
+          <NavLinks />
+          <NavSeparator />
+          <Search />
+          <NavSeparator />
+          <PaddedSocial />
+        </SecondaryMenu>
+      </Wrapper>
+    )
+  }
+
+  toggleMenu = () => {
+    this.setState({ isMenuOpen: !this.state.isMenuOpen })
+  }
+}
+
+export default MobileNavbar
diff --git a/components/Nav/NavButton.js b/components/Nav/NavButton.js
@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components'
+
+import rem from '../../utils/rem'
+import { navbarHeight } from '../../utils/sizes'
+import { resetInput } from '../../utils/form'
+
+const NavButton = styled.button`
+  ${resetInput}
+
+  flex: 0 0 auto;
+  min-width: ${rem(navbarHeight)};
+  height: ${rem(navbarHeight)};
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+
+  ${p => p.active && css`
+    background: rgba(0, 0, 0, 0.07);
+  `}
+
+  &:focus {
+    border: ${rem(2)} solid currentColor;
+    border-radius: ${rem(2)};
+  }
+
+  svg {
+    display: inline-block;
+
+    path {
+      fill: currentColor;
+    }
+  }
+`
+
+export default NavButton
diff --git a/components/Nav/NavLinks.js b/components/Nav/NavLinks.js
@@ -0,0 +1,48 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import rem from '../../utils/rem'
+import { navbarHeight } from '../../utils/sizes'
+import NavSeparator from './NavSeparator'
+import Link from '../Link'
+
+const Wrapper = styled.nav`
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+`
+
+const NavLink = styled(Link).attrs({
+  unstyled: true,
+})`
+  flex: 0 0 auto;
+  display: inline-block;
+  line-height: ${rem(navbarHeight)};
+  transition: opacity 200ms, transfrom 200ms;
+  cursor: pointer;
+
+  letter-spacing: ${rem(.4)}
+  color: currentColor;
+
+  &:hover,
+  &:focus {
+    opacity: 0.8;
+  }
+
+  &:active {
+    transform: scale(0.95);
+    opacity: 0.6;
+  }
+`
+
+const NavLinks = () => (
+  <Wrapper>
+    <NavLink>Concepts</NavLink>
+    <NavSeparator />
+    <NavLink>Try it out</NavLink>
+    <NavSeparator />
+    <NavLink>Documentation</NavLink>
+  </Wrapper>
+)
+
+export default NavLinks