<aside class="ds-menu-wrapper">
    <header class="ds-menu-header">
        <a href="/design-system">
            {% include '@DediSyliusTheme/DesignSystem/parts/_logo.html.twig' %}
        </a>

        <button class="ds-menu-picto">
            {% include '@SyliusShop/Icons/menu.html.twig' %}
            {% include '@SyliusShop/Icons/cross.html.twig' %}
        </button>
    </header>

    <nav class="ds-menu">
        <ul>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/colors">{{ 'app.design_system.colors.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/icons">{{ 'app.design_system.icons.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/typo">{{ 'app.design_system.typo.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/buttons">{{ 'app.design_system.buttons.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/forms">{{ 'app.design_system.forms.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/tables">{{ 'app.design_system.tables.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/components">{{ 'app.design_system.components.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/modals">{{ 'app.design_system.modals.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/selections">{{ 'app.design_system.selections.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/sliders">{{ 'app.design_system.sliders.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/blocks">{{ 'app.design_system.blocks.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/cms">{{ 'app.design_system.cms.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/helpers">{{ 'app.design_system.helpers.title'|trans }}</a></li>
            <li class="nav-lvl-2"><a class="nav-item" href="/design-system/emails">{{ 'app.design_system.emails.title'|trans }}</a></li>
        </ul>
    </nav>
</aside>

