Home Forums Porto Admin Template Sidebar toggle flickers after collapse

  • This topic has 7 replies, 2 voices, and was last updated 3 weeks ago by  Support2. This post has been viewed 131 times
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10030935
    Sankar
    Participant

    I am working on a task to maintain the state of the side bar toggle. This means if the user collapses the side bar menu, it should remain as collapsed when the user is browsing through the different pages in the site. If the user changes the side bar menu state to expanded, then the menu bar should stay as expanded until the user changes back to collapsed or logs out from the Site. Currently when the web site loads, the navigation side menu is displaying as expanded as default.

    We have the below HTML code in our Layout.cshtml

    <div class="sidebar-toggle" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
    <i class="fa fa-bars" aria-label="Toggle sidebar"></i>
    </div>

    I maintain the state of the menu bar in a sessionStorage. Then checks the sessionStorage and add/remove the CSS classes to maintain the state of the side menu bar. The below is the JavaScript code.

    //Capturing the click event
    $(".sidebar-toggle").click(function () {
        if ($('html').hasClass('sidebar-left-collapsed')) {
               sessionStorage.setItem('sideBarState', 'expand');
           }
            else {
                sessionStorage.setItem('sideBarState', 'closed');
          }
    
    //Javascript document ready
     $(document).ready(function () {  
     
     if (typeof sessionStorage !== 'undefined') {
                    if (sideBarStateVal !== null) {
                        if (sideBarStateVal == 'expand') {
                            ExpandSideBar();
                        }
                        else {
                            CloseSideBar();
                        }
                    }
                }
    }
    
    //Expanding the Menu
    function ExpandSideBar() {              
         $('html').addClass('sidebar-left-opened').removeClass('sidebar-left-collapsed');
        }
    
        //Closing the Menu
    function CloseSideBar() {
            $('html').addClass('sidebar-left-collapsed').removeClass('sidebar-left-opened');
        }

    The side menu collapses and expands as I need. But when I browse the different pages in the site when the side bar menu state is Collapsed, The side bar menu displays in Expanded mode at FIRST and then it collapses. Its kind of a flickering here. Somehow the OKLER Themes framework displays the side bar menu in Expended mode at very FIRST every time we load the page and then its getting collapsed. How to solve this issue?


    #10030938
    Support2
    Keymaster

    Hello, thanks for your purchase.

    The Porto Admin don’t have any code on the framework that expands the sidebar. This is based on the start class used at <html> tag.

    You need start the page with the correct class on the <html> tag. If the sessionStorage is “collapsed” you need start the HTML tag with the class sidebar-left-collapsed. For example:

    <html class="fixed sidebar-left-collapsed">

    If the sessionStorage is “expanded” you need start without the class. For example:

    <html class="fixed">

    Note that the HTML and CSS are rendered before the javascript execution. So this is the cause of the “flickers”. Because of that you need init the page with the correct class at html tag.

    We have some suggestions:

    1) Create a simple ajax to change the sidebar state on the user database. Then check the value with your server side language and add or not the sidebar-left-collapsed class.

    2) Still using the sessionStorage with javascript, you can apply the “Loading Overlay” feature on the pages: http://preview.oklerthemes.com/porto-admin/2.2.0/ui-elements-loading-overlay.html

    This will hide the flicks when the page is first loaded.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031008
    Sankar
    Participant
    This reply has been marked as private.
    #10031009
    Support2
    Keymaster

    Hello,

    Sorry but we couldn’t reproduce this issue here.

    You can send screenshot for us tough a service like https://imgbb.com (share the link with us). If you prefer by email you can send to maaprote@gmail.com

    Kind Regards,

    Rodrigo.


    #10031012
    Sankar
    Participant
    This reply has been marked as private.
    #10031013
    Support2
    Keymaster

    Hello, thanks for the detailed explanation.

    The issue is that you are defining a fixed width on ul.nav-main.

    On the “custom.css” file change the ul.nav-main to:

    ul.nav-main {
        margin-right: 0;
        /*width: 245px;*/
    }

    To control the sidebar left with you need attach CSS on class .sidebar-left:

    .sidebar-left {
        width: 245px;
    }

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031032
    Sankar
    Participant

    Hi Rodrigo,

    Your solution works great as we expect. Thank you so much for your help. I really appreciate your amazing support.

    Thanks,
    Sankar.


    #10031037
    Support2
    Keymaster

    Hello Sankar,

    Great!

    If you need further assistance, feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 8 posts - 1 through 8 (of 8 total)