{% load ui_assets ui_classes %}
{% ui_require_asset "trellis:sidebar" %}

<c-vars target="" icon="side_panel" label="Toggle sidebar" action="toggle" class="" />
{% ui_class "ui.sidebar" "toggle" class=class as toggle_class %}
{% ui_class "ui.sidebar" "toggleIcon" as icon_class %}
<button type="button"
        x-data="UiSidebarToggle"
        x-bind="root"
        data-ui-sidebar-toggle
        data-target="{{ target }}"
        data-action="{{ action }}"
        data-class="{{ class }}"
        aria-label="{{ label }}"
        aria-expanded="false"
        class="{{ toggle_class }}"
        {{ attrs }}>
    {% if icon == "side_panel" %}
        <c-component is="icons.side_panel"
                     target="{{ target }}"
                     class="{{ icon_class }}"
                     data-ui-sidebar-toggle-icon
                     data-icon="{{ icon }}"
                     aria-hidden="true" />
    {% else %}
        <c-component is="icons.{{ icon }}"
                     class="{{ icon_class }}"
                     data-ui-sidebar-toggle-icon
                     data-icon="{{ icon }}"
                     aria-hidden="true" />
    {% endif %}
</button>