Skip to content

Commit

Permalink
Replace react-stickynode with react-custom-scrollbars
Browse files Browse the repository at this point in the history
  • Loading branch information
@KyleAMathews
KyleAMathews committed Mar 7, 2017
1 parent e4ed8cd commit 4456b3a
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 76 deletions.
103 changes: 49 additions & 54 deletions www/components/Sidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,62 @@ import React from 'react';
import Link from 'gatsby-link';
import typography, { rhythm, scale } from '../utils/typography';
import { merge, media, presets, style } from 'glamor';
import Sticky from 'react-stickynode';

import menuItems from '../../docs/menu.yaml';
class Sidebar extends React.Component {
render () {
return (
<Sticky
top={85}
>
<nav
className="sidebar"
css={{
...scale(-1 / 5),
lineHeight: typography.options.baseLineHeight,
marginTop: rhythm(1 / 4),
width: '100%',
[presets.Tablet]: {
display: 'block',
// position: 'fixed',
// overflowY: 'scroll',
width: rhythm(10),
float: 'left',
paddingRight: rhythm(1),
},
}}
>
<div>
{menuItems.map((section) => {
return (
<div
<nav
className="sidebar"
css={{
...scale(-1 / 5),
lineHeight: typography.options.baseLineHeight,
marginTop: rhythm(1 / 4),
width: '100%',
[presets.Tablet]: {
display: 'block',
// position: 'fixed',
// overflowY: 'scroll',
width: rhythm(10),
float: 'left',
paddingRight: rhythm(1),
},
}}
>
<div>
{menuItems.map((section) => {
return (
<div
css={{
marginBottom: rhythm(1),
}}
>
<h3
css={{
marginBottom: rhythm(1),
marginBottom: rhythm(1 / 2),
marginTop: 0,
}}
>
<h3
css={{
marginBottom: rhythm(1 / 2),
marginTop: 0,
}}
>
{section.title}
</h3>
<ul
css={{
margin: 0,
listStyle: 'none',
}}
>
{Object.keys(section.links).map((title) => (
<Item
url={section.links[title]}
title={title}
/>
))}
</ul>
</div>
);
})}
</div>
</nav>
</Sticky>
>
{section.title}
</h3>
<ul
css={{
margin: 0,
listStyle: 'none',
}}
>
{Object.keys(section.links).map((title) => (
<Item
url={section.links[title]}
title={title}
/>
))}
</ul>
</div>
);
})}
</div>
</nav>
);
};
}
Expand Down
16 changes: 14 additions & 2 deletions www/layouts/default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Drawer from 'react-motion-drawer';
require('../css/prism-coy.css');
require('typeface-libre-franklin');
require('typeface-ubuntu-mono');
import { Scrollbars } from 'react-custom-scrollbars';

class DefaultLayout extends React.Component {
constructor (props) {
Expand All @@ -32,6 +33,9 @@ class DefaultLayout extends React.Component {
this.htmlElement.style.overflow = 'visible';
this.bodyElement.style.overflow = 'visible';
}
// Always set the HTML overflowY to scroll so there's no weird jumping
// around.
this.htmlElement.style.overflowY = `scroll`;
}
// const activeSection = basepath(this.props.location.pathname)
return (
Expand Down Expand Up @@ -82,12 +86,20 @@ class DefaultLayout extends React.Component {
css={{
display: 'none',
[presets.Tablet]: {
display: 'block',
display: 'fixed',
height: `100vh`,
float: 'left',
},
}}
>
<Sidebar />
<Scrollbars
autoHeight
autoHeightMin={`calc(100vh - ${rhythm(6)})`}
universal
autoHide
>
<Sidebar />
</Scrollbars>
</div>
<div
css={{
Expand Down
40 changes: 20 additions & 20 deletions www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,32 @@
"version": "0.0.0",
"dependencies": {
"bluebird": "^3.4.7",
"gatsby": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-link": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-parser-remark": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-parser-sharp": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-plugin-glamor": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-plugin-google-analytics": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-plugin-manifest": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-plugin-offline": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-plugin-sharp": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-source-filesystem": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-filesystem": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-remark": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-remark-autolink-headers": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-remark-copy-linked-files": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-remark-prismjs": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-remark-responsive-iframe": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-remark-responsive-image": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-remark-smartypants": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby-typegen-sharp": "1.0.0-alpha12-alpha.e1a3cfed",
"gatsby": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-link": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-parser-remark": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-parser-sharp": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-plugin-glamor": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-plugin-google-analytics": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-plugin-manifest": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-plugin-offline": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-plugin-sharp": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-source-filesystem": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-filesystem": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-remark": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-remark-autolink-headers": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-remark-copy-linked-files": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-remark-prismjs": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-remark-responsive-iframe": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-remark-responsive-image": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-remark-smartypants": "1.0.0-alpha12-alpha.f205e4d4",
"gatsby-typegen-sharp": "1.0.0-alpha12-alpha.f205e4d4",
"gray-percentage": "^2.0.0",
"lodash": "^4.16.1",
"react-addons-shallow-compare": "^15.3.2",
"react-custom-scrollbars": "^4.0.2",
"react-headroom": "^2.1.2",
"react-icons": "^2.2.1",
"react-motion-drawer": "^2.1.2",
"react-stickynode": "^1.2.1",
"react-typography": "latest",
"typeface-libre-franklin": "^0.0.22",
"typeface-ubuntu-mono": "^0.0.22",
Expand Down

0 comments on commit 4456b3a

Please sign in to comment.