Как реализовать суб-навигационное меню с помощью SIDR?

Question

Я пытаюсь реализовать вторую панель навигации, используя библиотеку SIDR (https://www.berriart.com/sidr/).. Я также использую mustache.js для создания шаблонов на своей html-странице. Я не уверен, как отобразить второй слой навигациинапример, на определенной странице. Допустим, моя панель навигации содержит ссылки: 1 2 3 4 5. Если пользователь находится на странице '5', я хочу, чтобы еще одна панель навигации, расположенная прямо под основной, отображалась с большим количеством ссылок.Вот код, который у меня есть. Как мне заставить его открыть вторую панель навигации и оставить ее открытой?

HTML:

<script src="//cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<!-- Include the Sidr JS -->
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>

<div class="sm-sidr-background" id="sidr_background"></div>

<div class ="sm-header small" style="text-align: center">
    <div class="row col-sm-12">
        <div>
            <i class = "fa fa-bars fa-2x" id="simple-menu" href="#sidr"></i>
        </div>
       <div style="display: inline-block" class="mobile-menu-text"> {{{title}}} </div>
    </div>
</div>

<div class="big container">
            <ul  class="nav nav-pills">
                {{#navigation_default}}
                <li class="nav-item">
                    <a class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                </li>
                {{/navigation_default}}
            </ul>
            {{#has_subnav_big}}
            <ul class=”nav nav-pills subnav i-don’t-know-what-class-to-use-here”>
                {{#subnav_big}}
                <li class=”nav-item”>
                    <a class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                </li>
                {{/subnav_big }}
            </ul>
            {{/has_subnav_big }}
        </div>

        <div id="sidr">
            <!-- Your content -->
            <ul class="nav nav-pills">
                {{#navigation_default}}
                <li class="nav-item">
                    <a id="responsive-menu-button" class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                    <div id="subnavigation">
                        {{#has_subnav}}
                        <ul class=”nav nav-pills subnav i-don’t-know-what-class-to-use-here” id="navigation">
                            {{#subnav}}
                            <li class=”nav-item”>
                                <a class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                            </li>
                            {{/subnav}}
                        </ul>
                        {{/has_subnav}}
                    </div>
                </li>
                {{/navigation_default}}
            </ul>
        </div>

JavaScript:

<script>
        $(document).ready(function() {
            $('#sidr_background').hide();

            $('#simple-menu').sidr();

            $('#simple-menu').on("click touchstart", function(){
                $('#sidr_background').show();
            });

            $('#sidr_background').on("click touchstart", function(){
                $.sidr('close', 'sidr');
               $('#sidr_background').hide();
            });

            $("img").addClass("img-fluid");
            $("img.no-fluid").removeClass("img-fluid");
            $("img.img-fluid").css("height", "auto");
        });

        $('#responsive-menu-button').sidr({
            name: '{{href}}',
            source: '#subnavigation'
        });
    </script>