How to make responsive datatable by adding panels to your left or right?

In the following example in the JS I create a basic datatable table, I easily create the functions to open and close the panels and define the data with which the table will be filled by means of a javascript variable.

In the CSS I define the styles for the left and right panels (sidebarLeft, sidebarRight), so that they occupy their position in their respective place, I add color and I add style for the position and color of their close button (closebtnLeft, closebtnRight) .

and finally in the HTML section I only add the left panel, the main container that contains the table that will be seen at all times and the right panel.

As you can see by having a sufficient screen size for the table to be displayed complete, and pressing either the button left or right panel, the table does not become responsive keeping its size before adding the panel

show size error in the table here

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ],
      "searching": false,
      "lengthChange": false,
      responsive:true
    } );
} );

function openNavLeft() {
  document.getElementById("mySidebarLeft").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function openNavRight() {
  document.getElementById("mySidebarRight").style.width = "250px";
  document.getElementById("main").style.marginRight = "250px";
}

function closeNavLeft() {
  document.getElementById("mySidebarLeft").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
function closeNavRight() {
  document.getElementById("mySidebarRight").style.width = "0";
  document.getElementById("main").style.marginRight= "0";
}



var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
    [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
    [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
    [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
    [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
    
];

.sidebarLeft {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebarRight {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}


.sidebarRight .closebtnRight {
  position: absolute;
  top: 0;
  left: 25px;
  font-size: 36px;
  margin-right: 50px;
}

.sidebarLeft .closebtnLeft {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.sidebarLeft a,.sidebarRight a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebarLeft a:hover,.sidebarRight a:hover {
  color: #f1f1f1;
}

body {
  font-family: "Lato", sans-serif;
}

<!--sidebar left-->
<div id="mySidebarLeft" class="sidebarLeft">
  <a href="javascript:void(0)" class="closebtnLeft" onclick="closeNavLeft()">×</a>
</div>

<!--main card-->
<div id="main" class = "card bg-light">
                    <div class="pt-3">
                        <div class = "row pull-right">
                            <div class = "col-12 ">
                                <ul class = "flex-lg-row d-flex flex-column mb-0 p-0">
                                    <li class = "d-inline px-lg-1">
                                      <button class="btn fas fa-arrow-left openbtn" onclick="openNavLeft()">
                                        </button>
                                      <button class="btn fas fa-arrow-right openbtn" onclick="openNavRight()"> 
                                        </button> 
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class = "clearfix"></div>
                    </div>
                    <div class = "card-block px-3 pb-0">
                        <table id="example" class="table table-hover display responsive no-wrap" width="100%"></table>                    
                        </div>
                </div>
                
<!--sidebar right-->
<div id="mySidebarRight" class="sidebarRight">
  <a href="javascript:void(0)" class="closebtnRight" onclick="closeNavRight()">×</a>
</div>



<!-------------------------------- CDN's css-------------------------------------->

<!-- Bootstrap & fontawesome css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />
<!-- Datatable css -->
<link rel = "stylesheet" href = "https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/autofill/2.3.0/css/autoFill.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.dataTables.min.css" />
<link rel = "stylesheet" href = "https://cdn.datatables.net/responsive/2.2.2/css/responsive.dataTables.min.css" />
<!-------------------------------- CDN's js-------------------------------------->
<!-- Boostrap & fontawesome js-->       
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Datatable js -->
<script type = "text/javascript" src = "https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/autofill/2.3.0/js/dataTables.autoFill.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/scroller/2.0.0/js/dataTables.scroller.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>