ReactBootrap ตอน 2 การสร้างเมนูด้านข้างด้วย ReactBootrap และการใช้งานร่วมกับ react-router-dom

จากบทความ วิธีสร้าง Responsive Side Menu (Bootstrap เมนูด้านข้าง) สำหรับ Bootstrap5  ในบทความนี้จะนำเสนอวิธีการสร้างเมนูด้านข้าง ( Side Menu ) ด้วย React โดยใช้ Bootstrap 

หมายเหตุ ตัวอย่างนี้ใช้ react-router-dom version 5.3.0 ซึ่งตอนนี้มี version react-router-dom ใหม่แล้ว

 รับเขียนโปรแกรม ReactJS

Link ที่เกี่ยวข้อง
วิธีสร้าง Responsive Side Menu (Bootstrap เมนูด้านข้าง) สำหรับ Bootstrap5

ReactBootrap ตอน 1 การสร้าง Master Page และ ตัวอย่างการใช้งาน react-router-dom ใน ReactBootrap

1. จาก  โปรเจคที่แล้ว ReactBootrap ตอน 1 การสร้าง Master Page และ ตัวอย่างการใช้งาน react-router-dom ใน ReactBootrap ให้เพิ่ม Font Awesome สำหรับ React เพื่อใช้เป็น icon สำหรับ เมนูบาร์

ด้วยคำสั่ง

npm i --save @fortawesome/fontawesome-svg-core
npm install  --save @fortawesome/free-solid-svg-icons
npm install  --save @fortawesome/react-fontawesome

ดังรูป

2. เปิด VS Code ด้วยคำสั่ง .code

3. แก้ไฟล์ใน master_page.js ใน folder src ดังนี้

import { Navbar, Container } from 'react-bootstrap';
// import Offcanvas, ListGroup จาก react-bootstrap
import { Offcanvas, ListGroup} from 'react-bootstrap';
// import icon bars จาก react-fontawesome
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
//เรียก ใช้ useState ( ของ React Hook )
import { useState } from "react";
//เรียก ใช้ useHistory จาก react-router
import { useHistory } from "react-router";

import 'bootstrap/dist/css/bootstrap.min.css';
//สร้าง Component Master Page
const MasterPage=(props)=>{

    const [show_menu, set_show_menu] = useState(false);//สถานะสำหรับเปิดปิดเมนูข้าง
    const history = useHistory();//สำหรับเปลี่ยนหน้า

    return (<>
    {/*-------สร้าง แถบเมนูด้านบน ด้วย Navbar จาก ReactBootstrap-----------*/}
    <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand
            style={{ cursor: "pointer" }}
            onClick={(event) => {
              set_show_menu(true);
            }}
          >
            <FontAwesomeIcon icon={faBars} /> React-Bootstrap
          </Navbar.Brand>
        </Container>
    </Navbar>
    
    {/*-------- Offcanvas สำหรับเมนูด้านข้าง --------- */}
    <Offcanvas
        show={show_menu}
        onHide={(event) => {
          set_show_menu(false);
        }}
        style={{ maxWidth: "300px" }}
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Menu</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <ListGroup variant="flush">
            {/* ------สร้างเมนูสำหรับ Link ไปหน้า Page1----- */}
            <ListGroup.Item
              action
              onClick={(event) => {
                set_show_menu(false);//เมื่อคลิก เมนู page1 ให้ซ่อน side menu
                history.push("/page1");//ไปที่หน้า page1
              }}
            >
              Page1
            </ListGroup.Item>
             {/* ------สร้างเมนูสำหรับ Link ไปหน้า Page2----- */}
            <ListGroup.Item
              action
              onClick={(event) => {
                set_show_menu(false);//เมื่อคลิก เมนู page2 ให้ซ่อน side menu
                history.push("/page2");//ไปที่หน้า page2
              }}
            >
              Page2
            </ListGroup.Item>

          </ListGroup>
        </Offcanvas.Body>
      </Offcanvas>

        <div className="container">
            {/*--------ส่วนของเนื้อหาเว็บที่จะมาแสดง-----*/}
            {props.children}
        </div>
        

    </>)

}

export default MasterPage;

4. ทดลองรันโดยกลับไปที่หน้า command line แล้วพิมพ์ npm run start

ผลลัพธ์ที่ได้คือ

เมื่อลองเปิด เมนูด้สนข้างจะปรากฎ offcanvas ดังนี้