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?


 

Suggested Topics

| |