Position absolute causes bug when used on Sidenav

[sidodekker-kodision]

I made a container on my page (position relative) and placed a sidenav in it. The sidenav is positioned fixed by default (like an offcanvas), but there is a possibility to position the sidenav absolute by adding the 'position-absolute' class or by declaring 'data-mdb-position="absolute"'. Both ways are causing a bug though: I can click the toggle button to open the menu, but the toggle doesn't close it anymore. Also my close-button doesn't close the menu anymore.

<h3 id="inbox">Inbox</h3> <!-- inbox component --> <div class="container p-3 m-0 border border-dark" style="overflow-x:hidden; min-height:500px; height:auto;"> <div class="container border-bottom border-primary p-0 pb-1 m-0 mb-3"> <button type="button" class="btn btn-primary btn-floating shadow-0 d-inline" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-inbox-filter" aria-controls="#sidenav-inbox-filter" aria-haspopup="true" aria-expanded="false"> <i class="fa-light fa-bars-sort"></i> </button> <h2 class="m-0 ms-3 fw-bold d-inline">Inbox</h2> </div> <div class="position-relative"> <nav id="sidenav-inbox-filter" class="sidenav h-auto shadow-0" data-mdb-close-on-esc="false" data-mdb-hidden="true" data-mdb-position="fixed" data-mdb-mode="side" data-mdb-content="#inboxContent" data-mdb-focus-trap="false"> <ul class="sidenav-menu"> <!-- Tasks --> <li class="sidenav-item border rounded mb-1"> <a class="sidenav-link"> <i class="fa-light fa-list-check fa-fw me-3"></i><span class="fw-bold">Tasks</span> </a> <ul class="sidenav-collapse show"> <hr class="dropdown-divider m-0" /> <li class="sidenav-item p-2"> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB1" checked /> <label class="form-check-label" for="flexRadioDefaultB1">My tasks</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB2" /> <label class="form-check-label" for="flexRadioDefaultB2">Work stock</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB3" /> <label class="form-check-label" for="flexRadioDefaultB3">All open tasks</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefaultB" id="flexRadioDefaultB4" /> <label class="form-check-label" for="flexRadioDefaultB4">Completed tasks</label> </div> </li> </ul> </li> </ul> </nav> <div id="inboxContent" class=" table-responsive my-3"> <table class="table table-striped table-hover table-slectable border"> <thead class="table-primary"> <tr> <th class="th-sm"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </th> <th class="th-sm">Name</th> <th class="th-sm">Position</th> <th class="th-sm">Office</th> <th class="th-sm">Age</th> <th class="th-sm">Start date</th> <th class="th-sm">Salary</th> <th class="th-sm">Options</th> </tr> </thead> <tbody> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Tiger Nixon</td> <td>System Architect </td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td class="position-relative"> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> <tr> <td> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" /> </div> </td> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> <td> <a href="#!" role="button" class="dropdown-toggle dropdown-toggle-rm-icon d-block text-end"> <i class="fa-light fa-ellipsis-vertical"></i> </a> </td> </tr> </tbody> </table> </div> </div> </div>