Toggle menu is not collapsing when I click the icon-CodePudding

I'm working on this link "https://sampledemos.online/training/index.html" in which toggle is not working. Below is my codings.

<aside id="layout-menu" >
          <div >
            <a href="index.html" >
              <img src="/training/images/logo.jpg">
            </a>

            <a href="javascript:void(0);" >
                  <i  onclick="openNav()"></i>
                </a>
          </div>

          <div ></div>

          <ul >
            <!-- Dashboard -->
            <li >
              <a href="index.html" >
                <i ></i>
                <div data-i18n="course">Course Master</div>
              </a>
            </li>
            ...................
            </aside>
--------------------------------------------
            <script>
function openNav() {
        $(document).ready(function () {
        $('#layout-menu').toggleClass('active');
        });
}
</script>

But when I use the below code it is working, but the right side content also needs to move to full screen, when I click the green color icon.

document.getElementById("layout-menu").style.width = "25px";

Did I missed any code in my side.

CodePudding user response：

well active class has no definition in your CSS

adding this style can solve your problem

#layout-menu.active {
    width: 64px;
}

you also need to add this style

.active~.layout-page {
    padding-left: 65px !important;
}

so the right part grows up filling the extra space

also

.app-brand .layout-menu-toggle {
    position: absolute;
    left: 15rem;
    border-radius: 50%;
}

it's better to align icon from the right of your element, or if you don't want to change that, this styles can help you to handle that icon alongside your menu changes

.active .layout-menu-toggle {
    left: 4rem;
}

I recommend you to not use static width values, you can use flex and flex-grow instead of padding