I'm working on this website - https://sampledemos.online/training/dashboard.html in which the toggle menu is hiding the content when menu expands.

<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme active">
          <div class="app-brand demo">
            <a href="index.html" class="app-brand-link">
              <img class="logo" src="/training/images/weblogo.jpg">
            </a>

            <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
                  <i class="bx bx-chevron-left bx-sm align-middle" onclick="openNav()"></i>
                </a>
          </div>

          <div class="menu-inner-shadow"></div>

          <ul class="menu-inner py-1">
            <!-- Dashboard -->
            <li class="menu-item active">
              <a href="course-master-list.html" class="menu-link">
                <i class="menu-icon tf-icons bx bxs-book-reader" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Course Master"></i>
                <div data-i18n="course">Course Master</div>
              </a>
            </li>

and am using javascript as below

<script>
function openNav() {
        $(document).ready(function () {
        $('#layout-menu').toggleClass('active');
        });
}
</script>

Below I have used styles like this...

#layout-menu.active {
    width: 64px;
}
.active~.layout-page {
    padding-left: 65px !important;
}
.app-brand .layout-menu-toggle {
    position: absolute;
    left: 15rem;
    border-radius: 50%;
}
.active .layout-menu-toggle {
    left: 4rem;
} 
```
Is there I missed anything in my codings...