Используйте mmenu, чтобы показать пользовательский HTML

Question

Как вы используете Mmenu для отображения пользовательского блока HTML? У меня плагин работает нормально для моей основной навигации. Ниже 980px это функционирует как выдвижная ничья.

Однако на другой странице у меня есть список категорий / фильтров. Нажатие на эти "ссылки" изменяет содержимое, отображаемое на странице, поэтому навигация как таковая отсутствует. Этот блок также содержит заголовки и, возможно, в ближайшем будущем образцы цветов, поэтому он не является стандартным "списком", как в основной навигации.

Я попытался скопировать блок кода внизу HTML-шаблона, а затем нацелил его в JS следующим образом:

$(document).ready(function() {
    $(".test").mmenu({
        // Options
    }, {
        // Configuration
        clone: false,
        offCanvas: {
            pageSelector: ".page"
        },
        classNames: {
            selected: "active"
        }
    });

    var API = $(".test").data("mmenu");
    var $icon = $(".filter-toggle");

    $icon.on("click", function() {
        API.open();
    });
});

Панель выдвигается, и элементы списка отображаются, но заголовки не видны, а переполнение не работает в mmenu - возможно, потому что контент добавляется вне mm-panels дела.

Вот CodePen: https://codepen.io/moy/pen/paWwER

И для справки мой HTML выглядит так...

<div class="test">

    <nav class="filters">

        <h3 class="filters__title">Type of meat</h3>
        <ul class="filters__list">
            <li class="filters__item"><a class="filters__link">Filter #1</a></li>
            <li class="filters__item"><a class="filters__link">Filter #2</a></li>
            <li class="filters__item"><a class="filters__link">Filter #3</a></li>
            <li class="filters__item"><a class="filters__link">Filter #4</a></li>
            <li class="filters__item"><a class="filters__link">Filter #5</a></li>
            <li class="filters__item"><a class="filters__link">Filter #6</a></li>
            <li class="filters__item"><a class="filters__link">Filter #7</a></li>
            <li class="filters__item"><a class="filters__link">Filter #8</a></li>
            <li class="filters__item"><a class="filters__link">Filter #9</a></li>
            <li class="filters__item"><a class="filters__link">Filter #10</a></li>
        </ul>

        <h3 class="filters__title">Another category</h3>
        <ul class="filters__list">
            <li class="filters__item"><a class="filters__link">Filter #1</a></li>
            <li class="filters__item"><a class="filters__link">Filter #2</a></li>
            <li class="filters__item"><a class="filters__link">Filter #3</a></li>
            <li class="filters__item"><a class="filters__link">Filter #4</a></li>
            <li class="filters__item"><a class="filters__link">Filter #5</a></li>
        </ul>

    </nav>

</div>

Также стоит упомянуть, что я не "клонирую" оригинальную навигацию. Я не думал, что это сработает, так как плагин автоматически попытается отформатировать его в свою собственную структуру.

Поэтому я решил, что просто продублировать весь блок и поместить его в div - лучший способ сделать это - правильно? В идеале я бы предпочел, чтобы на странице не было 2 дублированных блоков кода, но я не могу придумать другой способ?