{#if searchable}
  <ui-input fluid tiny search dark class="search" placeholder="{searchPlaceholder}" part="search"></ui-input>
{/if}
<div class="{classMap getMenuClasses}menu" part="menu">
  {#if hasNoResults}
    <div class="message">{getNoResultsMessage}</div>
  {else}
    {#each section in getMenu}
      {>title
        title=section
        isItem=false
      }
      {#if section.pages}
        <div class="{classMap getContentClasses section}content" part="content">
          <div class="menu" part="sub-menu">
            {#each page in section.pages}
              {#if page.pages}
                {>title
                  title=page
                  isItem=true
                }
                <div class="{activeIf isActiveItem page}content" part="sub-content">
                  <div class="menu">
                    {#each page in page.pages}
                      <a class="{classMap getPageClasses page}item" href={getLink page} part="page link">
                        {>highlight
                          item=page
                        }
                        {#if page.description}
                          <span class="description">{page.description}</span>
                        {/if}
                      </a>
                    {/each}
                  </div>
                </div>
              {else}
                <a class="{classMap getPageClasses page}item" href={getLink page} part="page link">
                  {>highlight
                    item=page
                  }
                </a>
              {/if}
            {/each}
          </div>
        </div>
      {/if}
    {/each}
  {/if}
</div>

{#snippet highlight}
  {#if item.highlight}
    {item.highlight.before}<span class="highlight">{item.highlight.match}</span>{item.highlight.after}
  {else}
    {item.name}
  {/if}
{/snippet}

{#snippet title}
  <a class="{classMap getTitleClasses title}title{isItem ? ' item' : ''}" href={getLink title} part="{isItem ? 'item-title' : 'title'}">
    {#if title.icon}
      <ui-icon icon={title.icon} class="icon" exportparts="icon:title-icon" />
    {else if title.image}
      <img src="{title.image}">
    {/if}
    <span class="text" part="text">
      {>highlight
        item=title
      }
    </span>
    {#if title.description}
      <span class="description" part="description">{title.description}</span>
    {/if}
    {#if canShowNavIcon title}
      <ui-icon icon={getNavIcon title} class="nav-icon" part="nav-icon"></ui-icon>
    {/if}
  </a>
{/snippet}