Làm Hamburger button và overlay menu khi responsive trên Gatsby

Trong bài trước mình đã hướng dẫn các bạn cách render Header Menu từ WordPress sang Gatsby JS. Thì với bài này chúng ta sẽ tiếp tục tìm hiểu và tạo Hamburger button và overlay menu khi responsive trên Gatsby nhé.

Tạo Hamburger Button và OverlayMenu trong Gatsby

Trước khi tạo hamburger button thì chúng ta sẽ khởi tạo các file sau trong thư mục Component của project. Mình đồng thời tạo NavbarMb.js. Sau đó import vào trong layout.js


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"

Như trong hình mình tạo các file như trên để import vào layout.js
Gatsby JS hamburger overlay

Sau đó các bạn vào file NavbarMb.js và viết lệnh như sau:

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">
            <i className="fas fa-bars navbar--icon text--light"></i></button>
            <ul className={`header__navbar ${isExpanded ? "is-expanded" : ""}`}>
              <StaticQuery query={graphql`{
                   allWordpressMenusMenusItems {
                      edges {
                        node {
                           name
                            items {
                               slug
                                 title
                                    }
                                 }
                             }
                        }
                   }
             `} render={props =>props.allWordpressMenusMenusItems.edges[0].node.items.map((menuItem,index) =>(
                   <li className="navbar__item" key={index}>
                       <Link className="navbar__link" to={menuItem.slug}>{menuItem.title}</Link>
                    </li>
                    ))}/>
            </ul>
         </>
       );
     }
  }
export default NavbarMb;

Vậy là bước đầu mình tạo Hamburger button với OverlayMenu xong rồi. Giờ chúng ta sáng phần tiếp theo là viết lệnh thực thi đóng mở OverlayMenu

Viết Script đóng mở Menu trong Gastby

Sau khi đã render ra giao diện thì tiếp theo chúng ta viết hàm để tác vụ lên button. Các bạn thêm trước return nhé:

  constructor(props) {
    super(props);
    this.state = {
      isExpanded: false
    };
  }
  handleToggle(e) {
    e.preventDefault();
    this.setState({
      isExpanded: !this.state.isExpanded
    });
  }

Tiếp theo các bạn dùng hàm render(){} để bọc return lại:

render() {
  const { isExpanded } = this.state;
  return (
          <>
            <button
            className="btn d--none dp--block"
            onClick={e => this.handleToggle(e)} aria-label="Navbar Button Mobile">
            <i className="fas fa-bars navbar--icon text--light"></i></button>
            <ul className={`header__navbar ${isExpanded ? "is-expanded" : ""}`}>
              .....
            </ul>
          </>
        );
      }
  }

Ở đây mình tạo state cho isExpanded đồng thời bắt sự kiện click của Hamburger button và mình để hàm ngay phần đặt className của OverlayMenu khi mà isExpanded bằng true thì sẽ return chuỗi is-expanded lúc này OverlayMenu className sẽ thay đổi theo sự kiện click của Hamburger. Việc còn lại ở đây là chúng ta css lại thì sẽ thành OverlayMenu thôi.

Sự khác nhau giữa useStaticQuery và StaticQuery trong Gastby

Nếu bạn xem kĩ graphQL thì sẽ có mục export code thì trong đó sẽ có một phần tiêu dùng useStaticQuery từ Gatsby để render menu. Vậy hai thằng useStaticQuery và StaticQuery này khác nhau như thế nào ?

Nếu dùng useStaticQuery thì chúng ta có thể lấy được các variables thông qua pageContext(các bạn sẽ gặp ở các bài sau) nhưng chỉ được tiêu dùng trong các trang còn Component thì không.
Còn StaticQuery thì ngược lại nhưng nó có thể tiêu dùng trong bất kỳ component kể cả trang.
Và còn một sự khác biệt là StaticQuery lại không được tiêu dùng trong React.createElement.

Kết luận

Qua bài này mình đã giúp các bạn các liên kết làm Hamburger button và overlay menu khi responsive trên Gatsby Framework. Bài kế tiếp mình sẽ hướng dẫn các bạn làm Navigation và footer trên Gatsby Framework.

Cảm ơn các bạn.