CODEWITHSUNDEEP
htmljquerybootstrap-4
Venkat
Venkat

Reputation: 115

Toggle menu is not collapsing when I click the icon

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" class="layout-menu menu-vertical menu bg-menu-theme">
          <div class="app-brand demo">
            <a href="index.html" class="app-brand-link">
              <img src="/training/images/logo.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="index.html" class="menu-link">
                <i class="menu-icon tf-icons bx bx-home-circle"></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.

Upvotes: 0

Views: 125

Answers (1)

Mahdiar Mransouri
Mahdiar Mransouri

Reputation: 722

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

Upvotes: 1

Related Questions