Improve 404

Author: marcoacierno

src/components/header/index.css

@@ -17,6 +17,11 @@
     }
   }
 
+  &--primary {
+    position: static;
+    background: var(--primary-color);
+  }
+
   &--logo {
     width: 10rem;
     height: 10rem;

src/components/header/index.js

@@ -1,16 +1,28 @@
 import React, { Component } from 'react';
+import { Link, navigate } from 'gatsby';
+import classnames from 'classnames';
 
 import Container from '../container';
 import Logo from '../logo';
 
 import './index.css';
 
 export default class Header extends Component {
-  onNavClick(e) {
+  static defaultProps = {
+    variant: 'transparent',
+  };
+
+  onNavClick = e => {
     e.preventDefault();
 
     const target = e.target;
     const destinationId = target.getAttribute('data-destination');
+
+    if (this.props.variant === 'primary') {
+      navigate(`/#${destinationId}`);
+      return;
+    }
+
     const destinationDom = window.document.querySelector(`#${destinationId}`);
 
     if (!destinationDom) {
@@ -21,13 +33,21 @@ export default class Header extends Component {
       top: destinationDom.offsetTop,
       behavior: 'smooth',
     });
-  }
+  };
 
   render() {
+    const { variant } = this.props;
+
     return (
-      <div className="Header">
+      <div
+        className={classnames('Header', {
+          'Header--primary': variant === 'primary',
+        })}
+      >
         <Container size="large">
-          <Logo />
+          <Link to="/">
+            <Logo />
+          </Link>
           <ul className="Header--links">
             <li>
               <a

src/components/layout/index.js

@@ -2,14 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Footer from '../footer';
+import Header from '../header';
 
 import './reset.css';
 import './theme.css';
 import './fonts.css';
 import './typography.css';
 
-const Layout = ({ children }) => (
+const Layout = ({ children, is404 }) => (
   <>
+    <Header variant={is404 ? 'primary' : 'transparent'} />
     <main>{children}</main>
     <Footer />
   </>

src/components/layout/theme.css

@@ -28,3 +28,18 @@
     --grid-columns: 1fr 1fr 1fr;
   }
 }
+
+#___gatsby {
+  min-height: 100vh;
+}
+
+#gatsby-focus-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  min-height: 100vh;
+}
+
+main {
+  flex-grow: 1;
+}

src/pages/404.css

@@ -0,0 +1,4 @@
+.page-404 {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}

src/pages/404.js

@@ -2,12 +2,23 @@ import React from 'react';
 
 import Layout from '../components/layout';
 import SEO from '../components/seo';
+import Container from '../components/container';
+
+import './404.css';
 
 const NotFoundPage = () => (
-  <Layout>
+  <Layout is404>
     <SEO title="404: Not found" />
-    <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <Container className="page-404" size="medium">
+      <h1>Oh no :(</h1>
+      <p>
+        Can't find any{' '}
+        <span role="image" aria-label="pizza">
+          🍕
+        </span>{' '}
+        here
+      </p>
+    </Container>
   </Layout>
 );
 

src/pages/index.js

@@ -2,15 +2,13 @@ import React from 'react';
 
 import Layout from '../components/layout';
 import SEO from '../components/seo';
-import Header from '../components/header';
 import Hero from '../components/hero';
 import PastEvents from '../components/past-events';
 import ContactUs from '../components/contact-us';
 
 export default props => (
   <Layout>
     <SEO title="Home" />
-    <Header />
     <Hero />
     <PastEvents />
     <ContactUs />