Sidebar: Jquery called in the Custom HTML page?



  • I would like to move the Categories page to this Jquery sidebar menu: MMenu or Simple Menu

    Can i do that in the custom HTML page? Trying to avoid a plugin or template change if possible... Putting nodebb widget space into one is harder than i thought. 😄


  • Community Rep

    You can, but there is already a slide menu on mobile so you might run into issues there. Also, it might be slower than using a widget/plugin because you need to grab the data from the server and parse it into html.

    I changed the navigation option for categories to have a route of "#" and an id of "catmenu" to stop it from going to the categories page, then I loaded one the scripts and append the data from the categories api to the menu.

    (This should get you started, I'll add some more comments later, but must sleep now. 💤 )

    <div class="sidebar left" style="position:fixed;top: 0;left: 0;bottom: 0;width: 270px;background: #448AFF;z-index:1051;"></div>
    <script>
    require(['https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js'], function () {
        $(".sidebar.left").sidebar().trigger("sidebar:close");
    
        $.getJSON('/api/categories', function(data){
            data.categories.forEach(function(category){
                $('.sidebar.left').append('<p><a href="/category/' + category.slug + '">' + category.name + '<a></p>');
            });
        });
    
        $('body').on('click', '#catmenu', function(e){
            $(".sidebar.left").trigger("sidebar:toggle");
            return false;
        });
    });
    </script>


  • Hey, thanks! Thats a real leg up on the work ahead. 😄



  • interesting, jquery install is demanding node 0.10.40 while the existing node is 0.10.37. Updating going to cause any incompatibilities with nodebb?


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.