Sidebar: Jquery called in the Custom HTML page?

lulzdev

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.

yariplus

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>

lulzdev

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

lulzdev

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?