Now that we have the header of the page, let’s try to focus on our footer. We will be creating a footer component in Gatsby with VSCode, we will skip the content and sidebar for the time being and get back to it later. Just like the header page we will create a new file called component > footer.js inside our component folder. We will again use css modules for our style called component > footer.module.css. Below is the code for the component > footer.js, as you can see it has clean html and I have removed a lot of redundant styles from wordpress.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import React from "react" import { Link } from "gatsby" import footerStyles from "./footer.module.css" const Footer = (props) => ( <div className={[footerStyles.footer, footerStyles.clearfix].join(" ")}> <div className={footerStyles.footerCopy}> <div className={footerStyles.menuFooterWrapper}> <div> <ul className={footerStyles.menuFooter}> <li><Link to="/">Home</Link></li> <li><Link to="/contact">Contact</Link></li> <li><Link to="/about">About</Link></li> </ul> </div> </div> <div className={footerStyles.clear}></div> <p className={footerStyles.copyright}>© {(new Date().getFullYear())} <Link to="/">{props.title}</Link> | {props.tagline}</p> </div> <div className={footerStyles.socialIcons}></div> </div> ) export default Footer |
Something you may note above is I am just using plain vanilla Javascript for the year where I have used {(new Date().getFullYear())} to get the current year. One can embed Javascript objects with JSX also.
Below you will find my footer.module.css also included, I have changed some of the styles, they were using id in my wordpress blog and I have changed them to use class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.clearfix { *display: inline-block; height: 1%; } .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .footer { width: 100%; margin: 0 -999px; padding: 30px 999px; display: block; overflow: hidden; background: #2f353e; box-shadow: rgba(0,0,0,.15) 0px 0px 5px; -moz-box-shadow: rgba(0,0,0,.15) 0px 0px 5px; -webkit-box-shadow: rgba(0,0,0,.15) 0px 0px 5px; } .footer-copy { float: left; } .menu-footer-wrapper { float: left; } .menu-footer { float: left; margin: 0; } .menu-footer li { float: left; margin: 0 20px 5px 0; display: inline; } .menu-footer-wrapper { float: left; } .copyright { float: left; margin: 0; position: relative; font-size: 12px; color: #a7b5c1; } .social-icons { float: right; margin-top: 5px; } |
Now let’s try to edit our index.js file and include the footer in there also, when we try to just add the footer below Header tag we will see an error. Adjacent JSX elements must be wrapped in an enclosing tag.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from "react" import Header from "../components/header" import Footer from "../components/footer" export default function Home() { return ( <Header title="Taswar Bhatti" tagline="The synonyms of software simplicity" /> <Footer title="Taswar Bhatti" tagline="The synonyms of software simplicity" /> ) } |
In order to mitigate the error we need to add empty tag <> and < / > which makes it pretty ugly, I think a better design will be to use a layout, so in the next section we will talk about how to use Layout and add our content and sidebar. See I told you we will get back to content and sidebar, just a bit later 🙂
Below you will find the fixed index.js file and also the screen shot of what we have so far, still far from done but at least we are getting there.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from "react" import Header from "../components/header" import Footer from "../components/footer" export default function Home() { return ( <> <Header title="Taswar Bhatti" tagline="The synonyms of software simplicity" /> <Footer title="Taswar Bhatti" tagline="The synonyms of software simplicity" /> </> ) } |
header-footer-gatsby
Summary
We created our footer style by using the css module, our styling still requires some more work padding etc but we are slowly progressing and getting there. We will tackle the layout in our next section to make thing clean such that we can use the layout for about, contact etc pages and not repeat the tags everywhere.
Leave A Comment