subnav.mustache

<div class="__js-root">
  <ui-app inline-template>
    <ui-calendar-dummy-provider v-slot="{ events, onShowMore, hasMore }">
      <ui-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
          <nav class="subnav">
            <div class="container container--wide">
              <div class="flex">
                <button
                  @click="toggleView('regions')"
                  class="btn btn--condensed btn--grey-500 btn--hoveractive btn--to-white text-sm mr-2"
                  :class="{'btn--activated': isCurrentView('regions')}"
                >
                  <div class="btn__body">
                    <span>Pardubický kraj</span>
                    <i class="ico--chevron-down ml-4"></i>
                  </div>
                </button>

                <button
                  @click="toggleView('calendar')"
                  class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm"
                  :class="{'btn--activated': isCurrentView('calendar')}"
                >
                  <div class="btn__body">
                    <i class="btn__inline-icon ico--calendar mr-0 md:mr-2 text-orange-300"></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')" v-if="events.length > 0">
                  <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
                    <span class="pr-4">&#123;{events[0].title}&#125;</span>
                    <span class="pl-4">&#123;{events[0].allDay ? 'Celý den' :  events[0].startDateVerbose + ', ' + events[0].startTimeVerbose}&#125;</span>
                  </div>
                </a>

                <button class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2">
                  <div class="btn__body">
                    <i class="btn__inline-icon ico--facebook mr-0 md:mr-2 text-brands-facebook"></i>
                    <span class="hidden md:block">Pardubický kraj</span>
                  </div>
                </button>
              </div>
            </div>
          </nav>
          <aside class="subnav-aside">
            <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
              <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--cross"></i></a>
              <ui-region-map class="container container--default"></ui-region-map>
            </div>
            <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
              <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--cross"></i></a>
              <div class="container container--default">
                  <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
              </div>
            </div>
          </aside>
      </ui-view-provider>
    </ui-calendar-dummy-provider>
  </ui-app>
</div>