add header navigation, more jellyfish

gatsby-config.js

@@ -52,7 +52,10 @@ module.exports = {
         {
             resolve: 'gatsby-plugin-sass',
             options: {
-                includePaths: [`${__dirname}/src/styles`]
+                includePaths: [
+                    `${__dirname}/node_modules`,
+                    `${__dirname}/src/styles`
+                ]
             }
         },
         {

src/components/Header.jsx

@@ -1,18 +1,58 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Link } from 'gatsby'
+import { Link, StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo-white.svg'
 import styles from './Header.module.scss'
 
 const Header = ({ siteTitle }) => (
-    <header className={styles.header}>
+    <StaticQuery
-        <div className={styles.headerContent}>
+        query={graphql`
-            <Link to={'/'} className={styles.headerLogo}>
+            query {
-                <Logo className={styles.headerLogoImage} />
+                site {
-                <h1 className={styles.headerTitle}>{siteTitle}</h1>
+                    siteMetadata {
-            </Link>
+                        title
-        </div>
+                    }
-    </header>
+                }
+
+                allSectionsYaml {
+                    edges {
+                        node {
+                            title
+                            description
+                            link
+                        }
+                    }
+                }
+            }
+        `}
+        render={data => {
+            const { title } = data.site.siteMetadata
+            const sections = data.allSectionsYaml.edges
+
+            return (
+                <header className={styles.header}>
+                    <div className={styles.headerContent}>
+                        <Link to={'/'} className={styles.headerLogo}>
+                            <Logo className={styles.headerLogoImage} />
+                            <h1 className={styles.headerTitle}>{title}</h1>
+                        </Link>
+
+                        <nav className={styles.headerMenu}>
+                            {sections.map(({ node }) => (
+                                <Link
+                                    key={node.title}
+                                    to={node.link}
+                                    className={styles.section}
+                                >
+                                    {node.title}
+                                </Link>
+                            ))}
+                        </nav>
+                    </div>
+                </header>
+            )
+        }}
+    />
 )
 
 Header.propTypes = {

src/components/Header.module.scss

@@ -1,7 +1,8 @@
 @import 'variables';
 
 .header {
-    background: $brand-black;
+    background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center -4rem;
+    background-size: cover;
     width: 100%;
     padding: $spacer / 2 0;
     padding-right: $spacer / 1.5;
@@ -48,3 +49,15 @@
 .headerMenu {
     justify-self: flex-end;
 }
+
+.section {
+    display: inline-block;
+    margin: 0 $spacer / 2;
+    font-family: $font-family-button;
+    color: $brand-grey-light;
+
+    &:hover,
+    &:focus {
+        color: $brand-white;
+    }
+}

src/components/HeaderHome.module.scss

@@ -2,7 +2,8 @@
 @import 'animations';
 
 .header {
-    background: $brand-black;
+    background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center 7rem;
+    background-size: cover;
     width: 100%;
     padding: $spacer * 2 0;
     min-height: 30rem;

src/components/HeaderSection.jsx

@@ -1,18 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'gatsby'
 import Content from './Content'
 import styles from './HeaderSection.module.scss'
 
 const HeaderSection = ({ title }) => (
     <header className={styles.headerSection}>
         <Content>
-            <h1 className={styles.headerSectionTitle}>{title}</h1>
+            <h1 className={styles.headerSectionTitle}>
+                <Link className={styles.rootLink} to="/">
+                    /
+                </Link>
+                {title}
+            </h1>
         </Content>
     </header>
 )
 
 HeaderSection.propTypes = {
-    title: PropTypes.string
+    title: PropTypes.array
 }
 
 export default HeaderSection

src/components/HeaderSection.module.scss

@@ -1,12 +1,17 @@
 @import 'variables';
 
 .headerSection {
-    padding: $spacer / 2 0;
+    padding: $spacer 0;
     border-bottom: .1rem solid $brand-grey-lighter;
 }
 
 .headerSectionTitle {
     margin: 0;
-    font-size: $font-size-large;
+    font-size: $font-size-h4;
     color: $brand-grey-light;
 }
+
+.rootLink {
+    display: inline-block;
+    margin-right: $spacer / 4;
+}

src/components/Layout.jsx

@@ -1,32 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { StaticQuery, graphql } from 'gatsby'
 import Header from './Header'
 
-const Layout = ({ children, header }) => (
+const Layout = ({ children, header }) => {
-    <StaticQuery
+    const headerElement = header || <Header />
-        query={graphql`
-            query SiteTitleQuery {
-                site {
-                    siteMetadata {
-                        title
-                    }
-                }
-            }
-        `}
-        render={data => {
-            const { title } = data.site.siteMetadata
-            const headerElement = header || <Header siteTitle={title} />
 
-            return (
+    return (
-                <>
+        <>
-                    {headerElement}
+            {headerElement}
-                    {children}
+            {children}
-                </>
+        </>
-            )
+    )
-        }}
+}
-    />
-)
 
 Layout.propTypes = {
     children: PropTypes.node.isRequired,

src/templates/Doc.jsx

@@ -16,12 +16,22 @@ export default class DocTemplate extends Component {
     render() {
         const { location } = this.props
         const post = this.props.data.markdownRemark
+        const sections = this.props.data.allSectionsYaml.edges
         const { section } = post.fields
         const { title, description } = post.frontmatter
 
+        // output section title as defined in sections.yml
+        const sectionTitle = sections.map(({ node }) => {
+            // compare section against section title from sections.yml
+            if (node.title.toLowerCase().includes(section)) {
+                return node.title
+            }
+        })
+
         return (
             <Layout location={location}>
-                <HeaderSection title={section} />
+                <HeaderSection title={sectionTitle} />
+
                 <Content>
                     {section ? (
                         <main className={styles.wrapper}>
@@ -79,6 +89,7 @@ export const pageQuery = graphql`
                 title
             }
         }
+
         markdownRemark(fields: { slug: { eq: $slug } }) {
             id
             excerpt
@@ -91,5 +102,15 @@ export const pageQuery = graphql`
                 section
             }
         }
+
+        allSectionsYaml {
+            edges {
+                node {
+                    title
+                    description
+                    link
+                }
+            }
+        }
     }
 `