diff --git a/www/src/components/sidebar-body.js b/www/src/components/sidebar-body.js
index 3448372424c33..43e389f9abb7a 100644
--- a/www/src/components/sidebar-body.js
+++ b/www/src/components/sidebar-body.js
@@ -1,56 +1,9 @@
import React from "react"
import Link from "gatsby-link"
-import typography, { rhythm, scale, options } from "../utils/typography"
+import { rhythm, scale, options } from "../utils/typography"
import presets, { colors } from "../utils/presets"
-const accentColor = colors.gatsby
-const listStyles = {
- listStyle: `none`,
- margin: 0,
- padding: 0,
- fontFamily: typography.options.headerFontFamily.join(`,`),
- "& li": {
- marginBottom: options.blockMarginBottom / 2,
- lineHeight: 1.3,
- paddingTop: rhythm(1 / 8),
- paddingBottom: rhythm(1 / 8),
- "& .nav-link": {
- position: `relative`,
- "&:before": {
- content: ` `,
- height: 4,
- width: 4,
- borderRadius: `100%`,
- top: `.5em`,
- left: `-.7em`,
- fontWeight: `normal`,
- position: `absolute`,
- transform: `scale(0.1)`,
- transition: `all ${presets.animation.speedDefault} ${
- presets.animation.curveDefault
- }`,
- [presets.Hd]: {
- height: 6,
- width: 6,
- top: `.65em`,
- marginTop: -3,
- left: `-1em`,
- },
- },
- },
- "& .nav-link-active": {
- opacity: 1,
- color: accentColor,
- fontWeight: `600`,
- "&:before": {
- background: accentColor,
- transform: `scale(1)`,
- },
- },
- },
-}
-
const Section = props => (
(
)
const SectionLinks = props => {
- const tutorialStyles = props.isTutorial
- ? {
- "&&": {
- "& > li": {
- marginBottom: `1rem`,
- "& > .nav-link": {
- fontWeight: `bold`,
- },
- },
- },
- }
- : false
+ const listStyles = {
+ listStyle: `none`,
+ margin: 0,
+ padding: 0,
+ fontFamily: options.headerFontFamily.join(`,`),
+ }
return (
s in the "Tutorial" section
"& ul": {
...listStyles,
},
- ...tutorialStyles,
}}
>
{props.items.map((item, index) => (
@@ -99,6 +46,7 @@ const SectionLinks = props => {
children={item.items}
key={index}
isInline={props.isInline}
+ isTutorial={props.isTutorial}
/>
))}
@@ -116,7 +64,13 @@ const SectionLink = props => {
let childnodes = null
if (props.children) {
childnodes = props.children.map((childnode, index) => (
-
+
))
}
@@ -125,23 +79,83 @@ const SectionLink = props => {
// If the last character is a * then the doc page is still in draft
const isDraft = item.title.slice(-1) === `*`
const title = isDraft ? item.title.slice(0, -1) : item.title
- const linkStyle = {
- "&&": {
- "& .nav-link": {
- borderBottom: `none`,
- boxShadow: `none`,
- color: isDraft ? colors.gray.calm : colors.gray.text,
+ const isTutorialFirstLevel = props.isTutorial && !props.isNested
+
+ const styles = {
+ listItem: {
+ marginBottom: isTutorialFirstLevel
+ ? rhythm(1)
+ : options.blockMarginBottom / 2,
+ lineHeight: 1.3,
+ paddingTop: rhythm(1 / 8),
+ paddingBottom: rhythm(1 / 8),
+ },
+ linkDefault: {
+ position: `relative`,
+ borderBottom: `none`,
+ boxShadow: `none`,
+ fontWeight: isTutorialFirstLevel ? `bold` : `normal`,
+ color: isDraft ? colors.gray.calm : colors.gray.text,
+ fontStyle: isDraft ? `italic` : false,
+ "&:before": {
+ content: ` `,
+ height: 4,
+ width: 4,
+ borderRadius: `100%`,
+ top: `.5em`,
+ left: `-.7em`,
fontWeight: `normal`,
- fontStyle: isDraft ? `italic` : false,
+ position: `absolute`,
+ transform: `scale(0.1)`,
+ transition: `all ${presets.animation.speedDefault} ${
+ presets.animation.curveDefault
+ }`,
+ [presets.Hd]: {
+ height: 6,
+ width: 6,
+ top: `.65em`,
+ marginTop: -3,
+ left: `-1em`,
+ },
},
- "& .nav-link-active": {
- color: accentColor,
- fontWeight: `bold`,
- fontStyle: isDraft ? `italic` : false,
+ },
+ linkActive: {
+ opacity: 1,
+ color: colors.gatsby,
+ fontWeight: `bold`,
+ "&:before": {
+ background: colors.gatsby,
+ transform: `scale(1)`,
},
},
}
+ const linkStyle = props.isNested
+ ? {
+ ...styles.listItem,
+ "& .nav-link": {
+ ...styles.linkDefault,
+ color: isDraft ? colors.gray.calm : colors.gray.text,
+ },
+ "& .nav-link-active": {
+ ...styles.linkActive,
+ color: isDraft ? colors.gray.calm : colors.gray.text,
+ fontWeight: `normal`,
+ "&:before": {
+ display: `none`,
+ },
+ },
+ }
+ : {
+ ...styles.listItem,
+ "& > .nav-link": {
+ ...styles.linkDefault,
+ },
+ "& > .nav-link-active": {
+ ...styles.linkActive,
+ },
+ }
+
return (
{item.link.charAt(0) == `#` ? (