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. 53
      src/components/LayoutFooter/Footer.js

53
src/components/LayoutFooter/Footer.js

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

Loading…
Cancel
Save