[www] Fix appearance of first-level sidebar nav items that link to a …

…page and contain subitems (gatsbyjs#8170)
gold356 · Sep 14, 2018 · 2df7889 · 2df7889
1 parent 5b1e3f4
commit 2df7889
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/www/src/components/sidebar/section-title.js b/www/src/components/sidebar/section-title.js
@@ -104,6 +104,16 @@ const SplitButton = ({
         item,
         location,
         onLinkClick,
+        customCSS:
+          level === 0
+            ? {
+                "&&": {
+                  ...styles.smallCaps,
+                  color: isExpanded ? colors.gatsby : false,
+                  fontWeight: isActive ? `bold` : `normal`,
+                },
+              }
+            : false,
       })}
     </span>
     {/* @todo this should cover 100% of the item's height */}
@@ -153,13 +163,7 @@ const SectionTitle = ({ children, isExpanded, isActive, disabled, level }) => (
       fontSize: `100%`,
       fontWeight: isActive ? `bold` : `normal`,
       margin: 0,
-      ...(level === 0 && {
-        color: colors.lilac,
-        fontFamily: options.headerFontFamily.join(`,`),
-        letterSpacing: `.075em`,
-        textTransform: `uppercase`,
-      }),
-
+      ...(level === 0 && { ...styles.smallCaps }),
       color: isExpanded ? colors.gatsby : false,
       "&:hover": {
         color: disabled ? false : colors.gatsby,
@@ -193,4 +197,9 @@ const styles = {
     right: 0,
     left: 40,
   },
+  smallCaps: {
+    fontFamily: options.headerFontFamily.join(`,`),
+    letterSpacing: `.075em`,
+    textTransform: `uppercase`,
+  },
 }
diff --git a/www/src/components/sidebar/sidebar.js b/www/src/components/sidebar/sidebar.js
@@ -296,10 +296,8 @@ const styles = {
       fontSize: scale(-4 / 10).fontSize,
       paddingBottom: 20,
     },
-    "&&": {
-      "& a": {
-        fontFamily: options.systemFontFamily.join(`,`),
-      },
+    "& a": {
+      fontFamily: options.systemFontFamily.join(`,`),
     },
     "& li": {
       margin: 0,

diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml
@@ -255,7 +255,7 @@
       link: /docs/prpl-pattern/
     - title: Querying data with GraphQL
       link: /docs/querying-with-graphql/
-- title: BEHIND THE SCENES
+- title: Behind the Scenes
   link: /docs/behind-the-scenes/
   items:
     - title: How APIS/Plugins Are Run

diff --git a/www/src/utils/sidebar/create-link.js b/www/src/utils/sidebar/create-link.js
@@ -12,6 +12,7 @@ const createLink = ({
   isActive,
   isParentOfActiveItem,
   stepsUI,
+  customCSS,
 }) => {
   const isDraft = _isDraft(item.title)
   const title = _getTitle(item.title, isDraft)
@@ -40,6 +41,7 @@ const createLink = ({
           isDraft && styles.draft,
           isActive && styles.activeLink,
           isParentOfActiveItem && styles.parentOfActiveLink,
+          customCSS && customCSS,
         ]}
         onClick={onLinkClick}
         to={item.link}