Rewire sidebar section and link styles, fix #4036

gatsbyjs · Feb 15, 2018 · cdc5fe8 · cdc5fe8
1 parent 5d89bc1
commit cdc5fe8
Showing 1 changed file with 87 additions and 73 deletions.
diff --git 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 => (
   <div>
     <h3
@@ -70,27 +23,21 @@ 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 (
     <ul
       css={{
         ...listStyles,
+        // For nested <ul>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}
         />
       ))}
     </ul>
@@ -116,7 +64,13 @@ const SectionLink = props => {
   let childnodes = null
   if (props.children) {
     childnodes = props.children.map((childnode, index) => (
-      <SectionLink key={index} node={childnode} children={childnode.items} />
+      <SectionLink
+        key={index}
+        node={childnode}
+        children={childnode.items}
+        isNested={true}
+        isTutorial={props.isTutorial}
+      />
     ))
   }
 
@@ -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 (
     <li key={item.title} css={linkStyle}>
       {item.link.charAt(0) == `#` ? (