Adjust page layout

windkomo · Jul 16, 2017 · d1a88ee · d1a88ee
1 parent 8df94ee
commit d1a88ee
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 36 deletions.
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -10,6 +10,7 @@ import {
   Box,
   Border,
 } from 'rebass'
+import NavBar from './NavBar'
 import Home from './Home'
 import GettingStarted from './GettingStarted'
 import PropsView from './PropsView'
@@ -22,10 +23,11 @@ import Component from './Component'
 import SideNav from './SideNav'
 
 const StickySide = styled(Box)`
-  display: none;
+  // display: none;
 
   @media screen and (min-width: 32em) {
     flex: none;
+    order: 0;
     display: block;
     position: -webkit-sticky;
     position: sticky;
@@ -36,20 +38,24 @@ const StickySide = styled(Box)`
   }
 `
 
-const App = props => (
-  <Provider theme={theme}>
-    <Home pattern='/' />
-    {props.location.pathname !== '/' && (
-      <Flex>
-        <StickySide w={[ 1, 192 ]}>
-          <Border right>
-            <SideNav {...props} />
-          </Border>
-        </StickySide>
-        <Box flex='0 1 auto' w={[ 1, 'calc(100% - 192px)' ]}>
+const App = props => {
+  const { pathname } = props.location
+
+  return (
+    <Provider theme={theme}>
+      <NavBar
+        bg={pathname === '/' ? 'transparent' : 'black'}
+      />
+      <Home pattern='/' />
+      <Flex wrap>
+        <Box
+          flex='0 1 auto'
+          order={[ null, 2 ]}
+          w={[ 1, 'calc(100% - 192px)' ]}>
           <Container
-            mt={5}
-            pb={6}
+            mt={6}
+            px={4}
+            pb={3}
             width={1024}>
             <GettingStarted pattern='/getting-started' />
             <PropsView pattern='/props' />
@@ -61,10 +67,17 @@ const App = props => (
             <Component pattern='/components/:name' />
           </Container>
         </Box>
+        {pathname !== '/' && (
+          <StickySide w={[ 1, 192 ]}>
+            <Border right>
+              <SideNav {...props} />
+            </Border>
+          </StickySide>
+        )}
       </Flex>
-    )}
-  </Provider>
-)
+    </Provider>
+  )
+}
 
 const theme = {
   maxWidth: 1280

diff --git a/docs/src/Home.js b/docs/src/Home.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import { createView } from 'rrx'
 import { Container } from 'rebass'
-import NavBar from './NavBar'
 import Header from './Header'
 import About from './About'
 import Features from './Features'
@@ -20,7 +19,6 @@ import Footer from './Footer'
 
 const Home = props => (
   <div>
-    <NavBar />
     <Header />
     <About />
     <Features />

diff --git a/docs/src/NavBar.js b/docs/src/NavBar.js
@@ -12,14 +12,17 @@ import Hide from 'hidden-styled'
 import Tweet from './Tweet'
 
 const NavBar = props => (
-  <Absolute top left right>
-    <Toolbar bg='transparent'>
-      <Hide xs>
-        <NavLink
-          href='http://jxnblk.com/rebass'
-          children='Rebass'
-        />
-      </Hide>
+  <Absolute
+    z={2}
+    top
+    left
+    right>
+    <Toolbar bg='transparent' {...props}>
+      <NavLink
+        is={Link}
+        href='/'
+        children='Rebass'
+      />
       <Hide xs>
         <NavLink
           href='https://github.com/jxnblk/rebass'

diff --git a/docs/src/Pagination.js b/docs/src/Pagination.js
@@ -8,7 +8,7 @@ import {
 } from 'rebass'
 
 const Pagination = props => (
-  <Flex my={5}>
+  <Flex my={[ 3, 5 ]}>
     {props.previous && (
       <NavLink
         is={Link}

diff --git a/docs/src/SideNav.js b/docs/src/SideNav.js
@@ -1,32 +1,41 @@
 import React from 'react'
 import { Link as RLink } from 'rrx'
+import styled from 'styled-components'
 import {
+  Flex,
   Box,
   Subhead,
   Divider,
   NavLink
 } from 'rebass'
 import { components } from './examples'
 
-const Link = props => (
+const Link = styled(props => (
   <NavLink
     is={RLink}
     href={'#' + props.name}
     children={props.name}
     {...props}
-    w={1}
+    f={[ 0, 1 ]}
+    w={[ 1/2, 1 ]}
     px={3}
     py={1}
   />
-)
+))([], props => ({
+  color: props.active ? 'white' : 'inherit',
+  backgroundColor: props.active ? props.theme.colors.blue : 'transparent',
+  '&:hover': {
+    backgroundColor: props.active ? props.theme.colors.blue : null,
+  }
+}))
 
 const SideNav = props => {
   const { pathname } = props.location
 
   return (
     <nav>
-      <Box py={3}>
-        <Link href='/' children='Rebass' />
+      <Flex wrap py={4}>
+        <Divider w={1} my={3} color='gray3' />
         <Link
           href='/getting-started'
           children='Getting Started'
@@ -57,7 +66,7 @@ const SideNav = props => {
           children='Server Side Rendering'
           active={pathname === '/server-side-rendering'}
         />
-        <Divider my={3} color='gray3' />
+        <Divider w={1} my={3} color='gray3' />
         <Link
           href='/components'
           children={components.length + ' Components'}
@@ -71,22 +80,24 @@ const SideNav = props => {
             active={pathname === '/components/' + name}
           />
         ))}
-        <Divider my={3} color='gray3' />
+        <Divider w={1} my={3} color='gray3' />
         <Link
           href='/storybook'
           children='Storybook'
         />
         <Link
           is='a'
+          f={0}
           href='https://github.com/jxnblk/rebass'
           children='GitHub'
         />
         <Link
+          f={0}
           is='a'
           href='http://jxnblk.com'
           children='Made by Jxnblk'
         />
-      </Box>
+      </Flex>
     </nav>
   )
 }