Render framework properly in dropdown

oguzozgen · Jun 15, 2018 · 7f3629b · 7f3629b
1 parent 0b8f967
commit 7f3629b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -144,7 +144,11 @@ const GitHubWrapper = styled.div`
  }
 `;
 
-export default function Header({ githubUrl, inverse, firstChapter, isHome, ...props }) {
+function capitalize([first, ...rest]) {
+ return [first.toUpperCase(), ...rest];
+}
+
+export default function Header({ githubUrl, inverse, framework, firstChapter, isHome, ...props }) {
  const [namespace, repo] = githubUrl.match(/github.com\/(.*)\/(.*)$/).slice(1);
  return (
  <NavWrapper {...props}>
@@ -217,7 +221,7 @@ export default function Header({ githubUrl, inverse, firstChapter, isHome, ...pr
  >
  <NavLink className={inverse ? 'inverse' : 'tertiary'}>
  <Icon icon="switchalt" />
- React
+ {capitalize(framework)}
  </NavLink>
  </WithTooltip>
  </NavItem>
@@ -237,12 +241,14 @@ export default function Header({ githubUrl, inverse, firstChapter, isHome, ...pr
 Header.propTypes = {
  githubUrl: PropTypes.string,
  inverse: PropTypes.bool,
+ framework: PropTypes.string,
  firstChapter: PropTypes.string.isRequired,
  isHome: PropTypes.bool,
 };
 
 Header.defaultProps = {
  githubUrl: null,
  inverse: false,
+ framework: 'react',
  isHome: null,
 };
diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -46,11 +46,13 @@ const TemplateWrapper = ({
  <meta name="google-site-verification" content="YjriYM9U-aWxhu_dv3PWfCFQ3JNkb7ndk7r_mUlCKAY" />
  </Helmet>
 
+ {/* Would love to get framework from graphql variables but they are not set for the homepage */}
  <HeaderWrapper
  title={title}
  githubUrl={githubUrl}
  inverse={pathname === '/'}
  isHome={pathname === '/'}
+ framework={pathname.split('/')[1]}
  firstChapter={toc[0]}
  />