JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- เรียกใช้ ฺBootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>

    <title>Bootstrap 5</title>
  </head>
  <body>

     <!-- สร้าง Top เมนู -->
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top ">
      <div class="container-fluid" >
           <!-- ปุ่มสำหรับเปิด เมนูด้านข้าง ( กำหนดให้ ยังไม่แสดงเป็นค่าเริ่มต้น และจะแสดงเมื่อหน้าจอเล็กกว่า หรือเท่ากับ 768 ) 
            เมื่อกดแล้ว จะไปทำงานที่ function show_side_menu() เพื่อแสดง Side เมนู
          -->
          <button class="btn menu-btn" type="button" style="display:none;" onclick="show_side_menu()" >
              <span class="navbar-toggler-icon"></span>
          </button> 

        <a class="navbar-brand" href="#">&nbsp;Bootstrap 5</a>

        <!---- เมนูที่มี ---->
        <div class="collapse navbar-collapse "  >
          <ul class="navbar-nav me-auto mb-2 mb-lg-0 menu-top">

            <li class="nav-item">
              <a class="nav-link top_nav_menu" href="#">Menu 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link top_nav_menu" href="#">Menu 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link top_nav_menu" href="#">Menu 3</a>
            </li>
            
             
          </ul>
        
        </div>
      </div>
    </nav>
   
    <!---- เมนูด้านข้าง ( Side Menu ) ---->
    <div class="d-flex flex-column p-3 text-white bg-dark side-menu " style="width: 280px;height:100vh;position:fixed;left:-280px">
        
        <ul class="nav nav-pills flex-column mb-auto pt-5 side_nav_menu">
        
        </ul>
        
    </div>


      <div class=" pt-5...

JavaScript

function show_side_menu()//function สำหรับแสดง หรือซ่อน side เมนู
        {
            let left_pos=parseInt(document.querySelector(".side-menu").style.left.replace("px",""));

            if(left_pos==-280)//ถ้า side เมนูยังไม่แสดง ให้แสดง side เมนู แบบ animation
            {

                var menu_animation=setInterval(function(){

                    left_pos+=5;
                    document.querySelector(".side-menu").style.left=left_pos.toString()+"px";

                    var left_content=parseInt(document.querySelector(".main-content-div").style.paddingLeft.replace("px",""));
                    left_content+=5;

                    document.querySelector(".main-content-div").style.paddingLeft=left_content.toString()+"px";

                    
                    if(left_pos==0)
                    {
                        clearInterval(menu_animation);
                    }

                },1);
            }
            else
            {   //ถ้า side เมนูยังแสดงอยู่ ให้ซ่อน side เมนู แบบ  animation
                 var menu_animation=setInterval(function(){

                    left_pos-=5;
                    document.querySelector(".side-menu").style.left=left_pos.toString()+"px";

                    var left_content=parseInt(document.querySelector(".main-content-div").style.paddingLeft.replace("px",""));
                    left_content-=5;
                    
                    document.querySelector(".main-content-div").style.paddingLeft=left_content.toString()+"px";
                    
                    if(left_pos==-280)
                    {
                        clearInterval(menu_animation);
                    }

                },1);
            }
            
        }

        function responsive()//function กำหนดให้ซ่อนปุ่ม เปิดปิด เมนูข้าง หรือแสดงเมนูบน
        {
            if(window.innerWidth <= 768)//หน้าจอน้อยกว่า หรือเท่ากับ 768
            {
               ...