subnav.mustache

<div class="__js-root" data-app="Subnav">
  <ui-subnav inline-template>
    <ui-subnav-view-provider :initial="{regions: false, calendar: false}" v-slot="{ showView, toggleView }">
      <div class="subnav">
        <div class="container container--wide">
          <div class="flex">
            <button
              @click="toggleView('regions')"
              class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2"
              :class="{'btn--overlay-active': showView('regions')}"
            >
              <div class="btn__body">
                <span>Pardubický kraj</span>
                <i class="fas fa-chevron-down ml-4"></i>
              </div>
            </button>

            <button
              @click="toggleView('calendar')"
              class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm"
              :class="{'btn--overlay-active': showView('calendar')}"
            >
              <div class="btn__body">
                <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2"></i>
                <span class="hidden md:block">Krajský kalendář</span>
              </div>
            </button>

            <a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')">
              <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
                <span class="pr-4">{{ event.title }}</span>
                <span class="pl-4">{{ event.date }}</span>
              </div>
            </a>

            <button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-brands-facebook text-sm ml-2">
              <div class="btn__body">
                <i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-2"></i>
                <span class="hidden md:block">Pardubický kraj</span>
              </div>
            </button>
          </div>
        </div>
      </div>
      <div class="subnav-aside">
        <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': showView('regions')}">
          <a @click="toggleView('regions')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
          <ui-region-map class="container container--default" />
        </div>
        <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': showView('calendar')}">
          <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
          <div class="container container--default">
            {{> molecules-calendar }}
          </div>
        </div>
      </div>
    </ui-subnav-view-provider>
  </ui-subnav>
</div>