Browse Source

Reorganized footer nav (#448)

* Reorganized footer nav to match latest structure

* Footer nav - skip Installation page for Quick Start
main
Joe Critchley 7 years ago
committed by Dan Abramov
parent
commit
184a7ef947
  1. 57
      src/components/LayoutFooter/Footer.js

57
src/components/LayoutFooter/Footer.js

@ -12,6 +12,7 @@ import FooterNav from './FooterNav';
import MetaTitle from 'templates/components/MetaTitle';
import React from 'react';
import {colors, media} from 'theme';
import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
import ossLogoPng from 'images/oss_logo.png';
@ -60,17 +61,27 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
}}>
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>Docs</MetaTitle>
<FooterLink to="/docs/hello-world.html">Quick Start</FooterLink>
<FooterLink to="/docs/thinking-in-react.html">
Thinking in React
</FooterLink>
<FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
<FooterLink to="/docs/jsx-in-depth.html">
Advanced Guides
</FooterLink>
{sectionListDocs.map(section => {
// Skip the Installation page for Quick Start
const defaultItem =
section.items[0].id === 'installation'
? section.items[1].id
: section.items[0].id;
return (
<FooterLink to={`/docs/${defaultItem}.html`}>
{section.title}
</FooterLink>
);
})}
</FooterNav>
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>Community</MetaTitle>
<MetaTitle onDark={true}>Channels</MetaTitle>
<ExternalFooterLink
href="https://github.com/facebook/react"
target="_blank"
rel="noopener">
GitHub
</ExternalFooterLink>
<ExternalFooterLink
href="http://stackoverflow.com/questions/tagged/reactjs"
target="_blank"
@ -103,34 +114,26 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
</ExternalFooterLink>
</FooterNav>
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>Resources</MetaTitle>
<FooterLink to="/community/conferences.html">
Conferences
</FooterLink>
<FooterLink to="/community/videos.html">Videos</FooterLink>
<FooterLink to="/community/examples.html">Examples</FooterLink>
<FooterLink to="/community/debugging-tools.html">
Complementary Tools
</FooterLink>
<MetaTitle onDark={true}>Community</MetaTitle>
{sectionListCommunity.map(section => (
<FooterLink to={`/community/${section.items[0].id}.html`}>
{section.title}
</FooterLink>
))}
</FooterNav>
<FooterNav layoutHasSidebar={layoutHasSidebar}>
<MetaTitle onDark={true}>More</MetaTitle>
<FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
<FooterLink to="/blog/">Blog</FooterLink>
<ExternalFooterLink
href="https://github.com/facebook/react"
target="_blank"
rel="noopener">
GitHub
</ExternalFooterLink>
<FooterLink to="/acknowledgements.html">
Acknowledgements
</FooterLink>
<ExternalFooterLink
href="http://facebook.github.io/react-native/"
target="_blank"
rel="noopener">
React Native
</ExternalFooterLink>
<FooterLink to="/acknowledgements.html">
Acknowledgements
</FooterLink>
</FooterNav>
</div>
<section

Loading…
Cancel
Save