Gatsby Framework: Hamburger button and menu overlay – Learn WordPress from a to z

In  the previous post, I showed you how to render Header Menu from WordPress to Gatsby JS . Then with this article we will continue to learn and create Hamburger button and overlay menu when responsive on Gatsby  .

Create Hamburger Button and OverlayMenu in Gatsby

Before creating the hamburger button , we will initialize the following files in the Component folder of the project. I also created NavbarMb.js. Then import into  layout.js

<code>
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import Navbar from "./Navbar"
import Hamburger from "./Hamburger" 
import OverlayMenu from "./OverlayMenu"
import "./layout.css"
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>

As shown in the picture, I created the above files to import into layout.js

Then you go to the file NavbarMb.js and write the following command:

<code>import { Link,graphql, StaticQuery, } from "gatsby";
import React, { Component } from "react";
class NavbarMb extends Component {
  return (
          
            <button classname="btn d--none dp--block" onclick="{e"> this.handleToggle(e)} aria-label="Navbar Button Mobile"&gt;
            <i classname="fas fa-bars navbar--icon text--light"></i></button>
            <ul classname="{`header__navbar" :></ul></code><code><staticquery query="{graphql`{" edges node items render="{props">props.allWordpressMenusMenusItems.edges[0].node.items.map((menuItem,index) =&gt;(
                   <li classname="navbar__item" key="{index}">
                       <link classname="navbar__link" to="{menuItem.slug}">{menuItem.title}
                    </li>
                    ))}/&gt;</staticquery></code><code>
            
         &gt;
       );
     }
  }
export default NavbarMb;
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span>
</div>

So the first step is to create a Hamburger button with OverlayMenu . Now we can do the next part, which is to write the command to open and close the OverlayMenu

Write a Script to open and close the Menu in Gastby

After rendering the interface, next we write a function to act on the button. Please add before return:

<code>  constructor(props) {
    super(props);
    this.state = {
      isExpanded: false
    };
  }
  handleToggle(e) {
    e.preventDefault();
    this.setState({
      isExpanded: !this.state.isExpanded
    });
  }</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
</div>

Next, you use the render(){} function to wrap the return:

<code>render() {
  const { isExpanded } = this.state;
  return (
          
            <button classname="btn d--none dp--block" onclick="{e"> this.handleToggle(e)} aria-label="Navbar Button Mobile"&gt;
            <i classname="fas fa-bars navbar--icon text--light"></i></button>
            <ul classname="{`header__navbar" :>
              .....
            </ul>&gt;
        );
      }
  }</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span>
</div>

Here I create the state for isExpanded and catch the click event of the Hamburger button  and I let the function immediately set the className of the OverlayMenu  when isExpanded  is true, it will return the is-expanded string. Now , the OverlayMenu className will change according to the click event of the isExpanded. Hamburgers . The rest here is that we css again, it will become OverlayMenu only.

Difference between useStaticQuery and StaticQuery in Gastby

If you look closely at graphQL , there will be an export code section where there will be a section that uses  useStaticQuery from Gatsby to render the menu. So how are these two guys useStaticQuery and StaticQuery different?

• If we use useStaticQuery , we can get the variables   through the pageContext (you will see in the following articles) but only used in pages and Components are not.
• StaticQuery is the opposite but it can be used in any component including the page.
• And another difference is that StaticQuery is not used in React.createElement .

summary

Through this article, I have helped you with the links to make Hamburger buttons and overlay menus when responsive on Gatsby Framework . In the next article, I will guide you to make  Navigation and footer on Gatsby Framework.

Thank you.