This topic contains 6 replies, has 3 voices, and was last updated by Sean Sean 2 years, 1 month ago.

Sidebar toggler cookie?


  • andytr
    Participant

    Posts: 2
    Member Reply #9025

    Hi,

    My sidebar won’t stay closed when I reload the page.  I assume this is because it is not saving to the cookie correctly.

    I have /assets/layouts/layout2/scripts/layout.min.js loaded in the page footer, which is where I believe the toggler cookie function is located, but it is not working.  Beyond this I have no idea how to troubleshoot this problem.

    Are you able to advise, please?

    Cheers

    Andy


    f_monts
    Participant

    Posts: 18
    Member Reply #9034

    You also need the /global/plugins/js.cookie.min.js

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #9036

    Hi,

    We had to removed this feature due to delay in frontend when user loads the page the sidebar used to be closed with some delay which looked inconsistent in terms of user experience. If you want to implement really smooth sidebar state remembering you will need to add a small code that sends the sidebar state(when it changes) to a server side script to remember it in the server side session or storage so when user reloads the page your can render the closed sidebar in the server side and in the frontend you will not have to run any JS code. The closed sidebar state is setup by just adding “page-sidebar-closed” class to the body element and “page-sidebar-menu-closed” class to the sidebar menu element.

    If you need any further clarifications please let us know.

    Thanks.


    f_monts
    Participant

    Posts: 18
    Member Reply #9040

    Sorry to interfere but the actual behavior (setting the cookie via JS) is good, you just need to check that cookie when rendering the page.

    For example, this is how I do in Twig: (in PHP you can check the $_COOKIE[‘sidebar_closed’])

    {% if app.request.cookies.get(‘sidebar_closed’) == 1 %}{% set is_sidebar_closed = true %}{% else %}{% set is_sidebar_closed = false %}{% endif %}

    <body class=”… {% if is_sidebar_closed %} page-sidebar-closed{% endif %}”>

    <ul class=”page-sidebar-menu{% if is_sidebar_closed %} page-sidebar-menu-closed{% endif %} …

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #9041

    Hi :),

    You are right. In your case you can get the cookie in your server side code. Then you just need to include the cookie plugin in your pages “assets/global/js.cookie.min.js” and go to “assets/layouts/layout/scripts/demo.js” and add below link

    if (sidebarOption == "fixed" && headerOption == "default") {
                    alert('Default Header with Fixed Sidebar option is not supported. Proceed with Fixed Header with Fixed Sidebar.');
                    $('.page-header-option', panel).val("fixed");
                    $('.sidebar-option', panel).val("fixed");
                    sidebarOption = 'fixed';
                    headerOption = 'fixed';
                }
    Cookies.set('sidebar_state', sidebarOption);

    Please note that actual template includes “demo.min.js” so you can use eather Metronoc’s gulp task to minify modified JS files or manually minify it and include into your pages.

    If you need any further help please let us know.

    Thanks.


    andytr
    Participant

    Posts: 2
    Member Reply #9042

    Thanks!  All sorted now!

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #9044

    Great! Good luck with your project 🙂

You must be logged in to reply to this topic.