<ui-sidebar>

<template
  is="ui-sidebar"
  type="string"
  links="array"
  groups="array"
  menuText="string"
>
  <div class="ui-sidebar">
    <div class="ui-sidebar-desktop">
      <div class="ui-sidebar-links" if="!props.type || props.type === 'links'">
        <ul if="Array.isArray(props.links) && props.links.length">
          <li map="link of props.links">
            <a href="{{link.href |> esc}}">{{link.label || 'hello' |> esc}}</a>
          </li>
        </ul>
      </div>

      <div class="ui-sidebar-groups" if="props.type === 'groups'">
        <div
          class="ui-sidebar-group"
          map="group of props.groups"
          if="Array.isArray(props.groups) && props.groups.length"
        >
          <h4 if="group.caption">{{group.caption |> esc}}</h4>
          <ul>
            <li map="link of group.links">
              <a href="{{link.href |> esc}}">{{link.label |> esc}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="ui-sidebar-mobile">
      <div
        class="ui-sidebar-mobile-links"
        if="!props.type || props.type === 'links'"
      >
        <ul if="Array.isArray(props.links) && props.links.length > 1">
          <li
            map="currentLink of props.links"
            if="currentLink.href === $.req.pathname"
          >
            <a href="javascript:void(0)" fx-toggle="open">
              <span>{{currentLink.label |> esc}}</span>
              <img src="/ui/img/chevron.svg" alt="toggle" />
            </a>
            <ul>
              <li map="link of props.links" if="link.href !== $.req.pathname">
                <a href="{{link.href |> esc}}">
                  <span>{{link.label |> esc}}</span>
                  <img src="/ui/img/chevron.svg" alt="link" />
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="ui-sidebar-mobile-groups" if="props.type === 'groups'">
        <menu fx-toggle="open">
          <img src="/ui/img/menu.svg" />
          <span>{{props.menuText ?? 'Menu'}}</span>
        </menu>

        <div class="ui-sidebar-mobile-groups-menu toggles">
          <div
            map="group of props.groups"
            if="Array.isArray(props.groups) && props.groups.length"
          >
            <h4 if="group.caption">
              <span>{{group.caption |> esc}}</span>
            </h4>
            <ul>
              <li map="link of group.links">
                <a href="{{link.href |> esc}}">{{link.label |> esc}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>