Articles in Category for Zendesk Guide

article_page.hbs

<!-- https://github.com/SaneMethod/jquery-ajax-localstorage-cache -->
<script src="{{asset 'jalc.min.js'}}"></script>

<!-- etc... -->

<section class="section-articles collapsible-sidebar">
        <h3 class="collapsible-sidebar-title sidenav-title">Articles in this Category</h3>
        <div id="siderbar-articles-in-category"></div>
<!-- Original content
        <h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
				<ul>
          {{#each section.articles}}
            <li>
              <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}">{{title}}</a>
            </li>
          {{/each}}
        </ul>
        {{#if section.more_articles}}
          <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
        {{/if}}
-->
      </section>
    </section>

script.js

$(document).ready(function() {
// For Articles in Category
  if(document.URL.match(/\/articles\//)) {
    var category_id = $(".breadcrumbs li:nth-child(2) a").attr("href").match(/[0-9]+/);
    var locale = window.location.pathname.split('/')[2];
    
    var Zendesk = {
      sections: function(category_id) {
          var defer = $.Deferred();
          $.ajax({
            url: "/api/v2/help_center/"+locale+"/categories/"+ category_id +"/sections.json?include=translations",
            type: "GET",
            localCache: true,
            cacheTTL: 24,
            cacheKey: locale+category_id,
            dataType: 'json',
              success: defer.resolve,
              error: defer.reject
          });
          return defer.promise();
      },
      articles: function(section_id) {
        var defer = $.Deferred();
        $.ajax({
          url: "/api/v2/help_center/"+locale+"/sections/"+ section_id +"/articles.json", 
          type: "GET",
          localCache: true,
          cacheTTL: 24,
          cacheKey: locale+section_id,
          dataType: 'json',
          success: defer.resolve,
          error: defer.reject
        });
        return defer.promise();
      }
    };
    
    Zendesk.sections(category_id).done(function(category) {
      $.each(category.sections, function(i,v){
        
        // Section is hidden?
        var hidden = true;
        v.translations.filter(function(translation, index){
          if (translation.locale == locale && translation.hidden == true) {
            hidden = true;
          } else if(translation.locale == locale && translation.hidden == false) {
            hidden = false;
          }
        });
        if (hidden) return true;
        
        $('#siderbar-articles-in-category').append('<h3 id='+v.id+'><a href='+v.html_url+' class="collapsible-sidebar-title sidenav-title">'+v.name+'</a></h3>');
        Zendesk.articles(v.id).done(function(section) {
          var nesting = $("<ul>");
          $.each(section.articles, function(j,x){
            if (x.draft) {
              return true;
            }
            nesting.append('<li id='+x.id+'><a href='+x.html_url+' class="sidenav-item '+ (x.html_url==window.location ? "current-article" : "") +'">'+x.name+'</a></li>');
          });
          $('#siderbar-articles-in-category > #'+v.id).append(nesting);
        });
      });
    });
    
    });

  }

style.css

@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: 1200px;
    overflow: hidden;
    overflow-y: scroll;
  }
}