{% if css_style is defined %}
<style type="text/css">
  .tbm.animate .tbm-item > .tbm-submenu, .tbm.animate.slide .tbm-item > .tbm-submenu > div {
  {{ css_style }}
  }
</style>
{% endif %}

<nav {{ attributes }}>
  <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarToggler">
    {{ content }}
  </div>
</nav>

<script>
{# Add the .tbm--mobile class before there is a chance for a flash of unstyled content. #}
if (window.matchMedia("(max-width: {{ block_config['breakpoint']}}px)").matches) {
  document.getElementById("{{ attributes.id }}").classList.add('tbm--mobile')
}

{% set hide_mobile = block_config['hide-mobile-menu'] %}
var hideMobile = {{ hide_mobile }}
if (hideMobile === 1) {
  document.getElementById('{{ attributes.id }}').classList.add('tbm--mobile-hide')
}

</script>
