<!-- Default -->
<section class="tab-panel" role="tabpanel" class="active" aria-hidden="false">
    <ul class="smartbar-filters">
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="tab-active">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
    </ul>
    <div class="smartbar-actions">
        <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg> Add</a>
        <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg> Clear</a>
    </div>
</section>

<!-- Inactive -->
<section class="tab-panel" role="tabpanel" class="hidden" aria-hidden="true">
    <ul class="smartbar-filters">
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="tab-active">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
        <li>
            <a href="?filter=article" class="">Article</a>
        </li>
    </ul>
    <div class="smartbar-actions">
        <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg> Add</a>
        <a class="button button-small" href="/foo"><svg width="12" height="12" class="icon icon-cancel"><use xlink:href="/assets/svg/core.svg#cancel" /></svg> Clear</a>
    </div>
</section>

<section class="tab-panel" role="tabpanel" class="{{state}}" aria-hidden="{{#if active}}false{{else}}true{{/if}}">
	<ul class="smartbar-filters">
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--active' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
		<li>
			{{ render '@smartbar-subtab--default' }}
		</li>
	</ul>
	<div class="smartbar-actions">
	{{ render '@smartbar-filter-action' }}
	{{ render '@smartbar-filter-action--clear' }}
	</div>
</section>
/* Default */
{
  "active": true,
  "state": "active"
}

/* Inactive */
{
  "active": null,
  "state": "hidden"
}

This would be the menu open state, as the closed state is basically smartbar-tab