How to toggle sidebar when screen size is bigger than 992px

[kush99993s]

Hello everyone,

Does anyone know how to toggle it when screen size is bigger than 992px?

[breakinho]

Hi kush, im facing the same problem, i want to have th toggle button always visible. I want to toggle side bar when i want to, not only when the screensize reach the 992px..

Already edited the file: _responsive.scss on \src\styles_responsive.scss but none success.. Can anybody help? 👍

[breakinho]

ok i think i got it @kush99993s

first of all go to header.component.html and add the button to toggle, you can place it after "search" form, for example..

<li class="nav-item">
                    <a href="javascript:void(0)"class="navbar-toggler-icon" style="padding: 0.375rem 1rem !important; border-color: #999;" (click)="toggleButton()"></a>
                </li> 

then you have to edit the \src\styles_responsive.scss

1920px mean that the button will work when you have al least 1920px (place the max resoltuion you have.. ) the left:40px mean that when you close it you only see 40px of the sidebar.. if you want the side bar to disapear you can place 10px ou 0px

media screen and (max-width: 1920px) {
    .push-right {
        .sidebar {
            left: 40px !important;
        }
    }
}

And to make sure that the "mobile mode" still works, you have to edit the sidebar.component.scss, and change the max-width px:

@media screen and (max-width: 1px) {
    .sidebar {
        top: 54px;
        left: 0px;
    }
}

Hope i helped you! 👍

[kush99993s]

what is code for toggleButton ?

[breakinho]

the code for toggleButton is the same code used at toggleSidebar(), i made it just to try some things.. heres the code: (header.components.ts)

toggleButton() {
        const x: any = document.querySelector('body');
        x.classList.toggle('push-right');
    }

[alpesh-patel93]

You can also make following changes to get expected behaviour:

1. In src/app/layout/layout.component.scss max-width: 992px -> max-width: 1990px
2. In src/app/layout/components/header/header.component.scss Add @media (max-width: 1990px) { .navbar-expand-lg .navbar-toggler { display: block; } }
3. In src/app/layout/components/header/header.component.ts window.innerWidth <= 992 -> window.innerWidth <= 1990
4. In src/app/layout/components/sidebar/sidebar.component.ts max-width: 992px -> max-width: 1990px
5. In src/styles/_responsive.scss max-width: 992px -> max-width: 1990px
6. In src/styles/_rtl.scss max-width: 992px -> max-width: 1990px

Hope, This would be helpful.

[bbeniston]

@alpesh-patel93 I think, in the 4th point the file is src/app/layout/components/sidebar/sidebar.component.scss

Otherwise it works fine. :+1: