{#
/**
 * @file
 * CivicTheme Mobile Navigation component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - top_menu: [array] Top section menu items:
 *   Each item contains:
 *   - title: [string] Menu item title.
 *   - url: [string] Menu item URL.
 *   - in_active_trail: [boolean] Whether the item is in the active trail.
 *   - is_expanded: [boolean] Whether the item is expanded.
 *   - below: [array] Submenu items.
 * - bottom_menu: [array] Bottom section menu items:
 *   Each item contains:
 *   - title: [string] Menu item title.
 *   - url: [string] Menu item URL.
 *   - in_active_trail: [boolean] Whether the item is in the active trail.
 *   - is_expanded: [boolean] Whether the item is expanded.
 *   - below: [array] Submenu items.
 *
 * Slots:
 * - content_top: Top content area.
 * - content_bottom: Bottom content area.
 *
 * Blocks:
 * - content_top_block
 * - top_menu_block
 * - bottom_menu_block
 * - content_bottom_block
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}

<div class="ct-mobile-navigation {{ modifier_class -}}" data-flyout data-flyout-direction="right" data-flyout-focus=".ct-link" {% if attributes %}{{ attributes|raw }}{% endif %}>
  <div data-flyout-panel class="ct-mobile-navigation__panel">
    {% include 'civictheme:mobile-navigation-close' with {
      theme: theme,
    } only %}

    {% block content_top_block %}
      {% if content_top is not empty %}
        <div class="ct-mobile-navigation__content_top">
          {{ content_top|raw }}
        </div>
      {% endif %}
    {% endblock %}

    {% block top_menu_block %}
      {% if top_menu is not empty %}
        <div class="ct-mobile-navigation__top-menu-wrapper">
          {% include 'civictheme:mobile-navigation-menu' with {
            theme: theme,
            items: top_menu,
            modifier_class: 'ct-mobile-navigation__top-menu',
          } only %}
        </div>
      {% endif %}
    {% endblock %}

    {% block bottom_menu_block %}
      {% if bottom_menu is not empty %}
        <div class="ct-mobile-navigation__bottom-menu-wrapper">
          {% include 'civictheme:mobile-navigation-menu' with {
            theme: theme,
            items: bottom_menu,
            modifier_class: 'ct-mobile-navigation__bottom-menu',
          } only %}
        </div>
      {% endif %}
    {% endblock %}

    {% block content_bottom_block %}
      {% if content_bottom is not empty %}
        <div class="ct-mobile-navigation__content_bottom">
          {{ content_bottom|raw }}
        </div>
      {% endif %}
    {% endblock %}
  </div>
</div>
