Subnav now enhanced with JS

source/_patterns/02-organisms/00-global/subnav.mustache

-<div class="subnav">
-  <div class="container container--wide">
-    <div class="flex">
-      <button class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2">
-        <div class="btn__body">
-          <span>Pardubický kraj</span>
-          <i class="fas fa-chevron-down ml-4"></i>
-        </div>
-      </button>
+<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 class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm">
-        <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>
+            <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">
-        <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>
+            <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>
+            <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>
-      </button>
-    </div>
-  </div>
+      </div>
+    </ui-subnav-view-provider>
+  </ui-subnav>
 </div>

source/css/atoms/button.pcss

@@ -213,7 +213,8 @@
       @apply text-white;
     }
 
-    &:hover {
+    &:hover,
+    &.btn--overlay-active {
       .btn__body {
         @apply bg-white text-black;
       }
@@ -229,7 +230,8 @@
       @apply text-red-100;
     }
 
-    &:hover {
+    &:hover,
+    &.btn--overlay-active {
       .btn__body {
         @apply bg-red-100;
       }

source/css/organisms/subnav.pcss

 .subnav {
   @apply bg-black text-white font-condensed py-2;
 }
+
+.subnav-aside {
+  @apply absolute;
+}
+
+.subnav-aside__close {
+  @apply hidden absolute text-3xl pr-8 cursor-pointer right-0;
+
+  @screen xl {
+    @apply block;
+  }
+}
+
+.subnav-aside__item {
+  @apply absolute w-screen opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21;
+
+  @screen lg {
+    @apply py-8;
+  }
+}
+
+.subnav-aside__item--visible {
+  @apply opacity-100 pointer-events-auto;
+}

source/js/apps.js

@@ -3,10 +3,12 @@ import FlipClock from './apps/flip-clock';
 import Footer from './apps/footer';
 import Navbar from './apps/navbar';
 import RegionMap from './apps/region-map';
+import Subnav from './apps/subnav';
 
 export default {
   FlipClock,
   Footer,
   Navbar,
   RegionMap,
+  Subnav,
 };

source/js/apps/region-map/RegionMap.vue

 <template>
-  <div class="region-map flex justify-center items-center space-x-16 ">
+  <div class="region-map flex justify-start items-center space-x-16 ">
     <div class="">
       <h1 class="head-alt-sm mb-2">Vyberte kraj</h1>
       <ul class="region-map__list leading-loose whitespace-no-wrap text-sm">
@@ -8,7 +8,7 @@
         </li>
       </ul>
     </div>
-    <div class="w-full max-w-xl">
+    <div class="w-full max-w-xl hidden md:block">
       <svg
         xmlns:xlink="http://www.w3.org/1999/xlink"
         xmlns="http://www.w3.org/2000/svg"

source/js/apps/subnav/Subnav.vue

+<script>
+  import UiRegionMap from "../region-map/RegionMap";
+  import UiSubnavViewProvider from "./SubnavViewProvider";
+
+  export default {
+    components: {
+      UiSubnavViewProvider,
+      UiRegionMap,
+    },
+  }
+</script>

source/js/apps/subnav/SubnavViewProvider.vue

+<template>
+  <div>
+    <slot v-bind:views="views" v-bind:showView="showView" v-bind:toggleView="toggleView"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initial: {
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      views: this.$props.initial,
+      keyListener: e => {
+        // Esc
+        if (e.keyCode === 27) {
+          this.hideAllViews();
+        }
+      }
+    };
+  },
+  methods: {
+    setView(viewId, show) {
+      this.$data.views[viewId] = show;
+    },
+    toggleView(viewId) {
+      Object.keys(this.$data.views).forEach(key => {
+        if (key !== viewId) {
+          this.setView(key, false);
+        }
+      });
+
+      this.setView(viewId, !this.showView(viewId));
+    },
+    showView(viewId) {
+      return this.$data.views[viewId];
+    },
+    hideAllViews() {
+      Object.keys(this.$data.views).forEach(key => {
+        this.setView(key, false);
+      });
+    }
+  },
+  mounted() {
+    window.addEventListener('keydown', this.$data.keyListener);;
+  },
+  destroyed() {
+    window.removeEventListener('keydown', this.$data.keyListener);
+  }
+}
+</script>

source/js/apps/subnav/index.js

+import Vue from 'vue';
+import UiSubnav from './Subnav.vue';
+
+const appFactory = (el, attrs) => {
+  // Bootstrap Vue.js.
+  new Vue({el, components: { UiSubnav }});
+};
+
+export default appFactory;