diff --git a/district/templates/district/base.html b/district/templates/district/base.html
index 296dbe2362620fc45504018283b0f44920eceb53..45206a191fde7d7d5b4745baadc24097b709b9fb 100644
--- a/district/templates/district/base.html
+++ b/district/templates/district/base.html
@@ -116,6 +116,66 @@
     </ui-app>
 </nav>
 
+<div class="__js-root">
+  <ui-app inline-template>
+
+    <ui-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
+      <nav class="subnav py-0">
+        <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  px-0" :class="{'btn--activated': isCurrentView('regions')}">
+              <div class="btn__body py-2">
+                <span>Piráti v dalších krajích</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 px-0" :class="{'btn--activated': isCurrentView('calendar')}">
+              <div class="btn__body py-2">
+                <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>
+
+            {% if page.root_page.facebook %}
+              <a href="{{ page.root_page.facebook }}" target="_blank" rel="noopener noreferrer" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2  px-0">
+                <div class="btn__body py-2">
+                  <i class="btn__inline-icon ico--facebook mr-0 md:mr-2 text-brands-facebook"></i>
+                  <span class="hidden md:block">{{ page.root_page }}</span>
+                </div>
+              </a>
+            {% endif %}
+
+          </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--close"></i></a>
+          <ui-region-map class="container container--default" />
+        </div>
+        <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
+          <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
+          <div class="container container--default">
+
+              <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=500&wkst=2&hl=cs&bgcolor=%23FFFFFF&src=kddvdvu3adcjef2kro4j6mm838%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FPrague" style="border-width:0; width: 100%; height: 410px; border: 0; overflow: hidden;"></iframe>
+              <p class="mt-4">
+                <a class="btn btn--orange-200 btn--hoveractive" href="https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&mode=AGENDA&height=500&wkst=2&hl=cs&bgcolor=%23FFFFFF&src=kddvdvu3adcjef2kro4j6mm838%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FPrague">
+                  <span class="btn__body">Zobrazit všechny akce</span>
+                </a>
+              </p>
+
+          </div>
+        </div>
+      </aside>
+    </ui-view-provider>
+
+
+  </ui-app>
+</div>
+
+
   {% block subheader %}{% endblock %}
   <div class="container container--default lg:py-4">
   {% block content %}{% endblock %}