From 9445b67a0c1922678e7f5464ed7bba7921fa0d58 Mon Sep 17 00:00:00 2001
From: Florian Kissling <florian.kissling@gmail.com>
Date: Fri, 14 Sep 2018 22:13:38 +0200
Subject: [PATCH] [www] Fix appearance of first-level sidebar nav items that
 link to a page and contain subitems

---
 www/src/components/sidebar/section-title.js | 23 ++++++++++++++-------
 www/src/components/sidebar/sidebar.js       |  6 ++----
 www/src/data/sidebars/doc-links.yaml        |  2 +-
 www/src/utils/sidebar/create-link.js        |  2 ++
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/www/src/components/sidebar/section-title.js b/www/src/components/sidebar/section-title.js
index 1535a9415f505..dd0701978d726 100644
--- 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
index 9e2c551dfc430..0c786da21f8bd 100644
--- 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
index fb1595c18d0e2..bc3dab1b4a1ac 100644
--- 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
index 75c7be982d23a..6aa32bfd94bb7 100644
--- 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}