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

Ngày đăng: 07 - 05 - 2020 Lượt xem: 48 lượt

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 sử dụng  useStaticQuery từ Gatsby để render menu. Vậy hai thằng useStaticQueryStaticQuery 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 sử 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ể sử 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 sử dụng trong React.createElement.

Tổng kết

Qua bài này mình đã giúp các bạn các liên kết làm Hamburger buttonoverlay 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 Navigationfooter trên Gatsby Framework.

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

5 1 vote
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

Thêm pagination và sidebar vào archive template trên Gatsby

Thêm pagination và sidebar vào archive template trên Gatsby

05 - 06 - 2020

Trong bài trước mình cùng mọi người cách tạo archive template trên Gatsby. Bài viết lần này mình và các...

Làm Archive template trên Gatsby

Làm Archive template trên Gatsby

02 - 06 - 2020

Trong bài trước mình cùng mọi người làm  sidebar cho page template trên Gatsby. Thì với bài viết này chúng...

Thêm sidebar vào page template trên Gatsby

Thêm sidebar vào page template trên Gatsby

27 - 05 - 2020

Trong bài trước mình cùng mọi người làm  page template trong Gatsby. Thì hôm nay mình tiếp tục hướng...

Làm Page template trên Gatbsy

Làm Page template trên Gatbsy

25 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render phần tin...

Render Tin tức mới của homepage trên Gatsby

Render Tin tức mới của homepage trên Gatsby

18 - 05 - 2020

Trong bài trước mình cùng mọi người luyện tập sử dụng custom field từ WordPress để render sang giao...

Render slider và CTA images của homepage trên Gatsby

Render slider và CTA images của homepage trên Gatsby

17 - 05 - 2020

Trong bài trước mình đã hướng dẫn các bạn render footer từ WordPress sang Gatsby. Nói đơn giản là các...

0
Would love your thoughts, please comment.x
()
x