Footer now JS active

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

-<footer class="footer bg-grey-700 text-white">
+<footer class="footer bg-grey-700 text-white __js-root" data-app="Footer">
+  <ui-footer inline-template>
+    <div>
       <div class="footer__main py-4 lg:py-16 container container--default">
         <section class="footer__brand">
           <img
@@ -13,7 +15,7 @@
         </section>
         <section class="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4">
           <div class="pt-8 pb-4 lg:py-0">
-        <span class="text-xl uppercase text-white">Nová sekce</span>
+            <ui-footer-collapsible label="Nová sekce">
               <ul class="mt-6 space-y-2 text-grey-200">
                 <li>
                   <a href="#">Lorem ipsum</a>
@@ -25,9 +27,10 @@
                   <a href="#">Lorem ipsum</a>
                 </li>
               </ul>
+            </ui-footer-collapsible>
           </div>
           <div class="py-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
-        <span class="text-xl uppercase text-white">Nová sekce</span>
+            <ui-footer-collapsible label="Nová sekce">
               <ul class="mt-6 space-y-2 text-grey-200">
                 <li>
                   <a href="#">Lorem ipsum</a>
@@ -39,9 +42,10 @@
                   <a href="#">Lorem ipsum</a>
                 </li>
               </ul>
+            </ui-footer-collapsible>
           </div>
           <div class="pt-4 lg:py-0 border-t border-grey-400 lg:border-t-0">
-        <span class="text-xl uppercase text-white">Nová sekce</span>
+            <ui-footer-collapsible label="Nová sekce">
               <ul class="mt-6 space-y-2 text-grey-200">
                 <li>
                   <a href="#">Lorem ipsum</a>
@@ -53,6 +57,7 @@
                   <a href="#">Lorem ipsum</a>
                 </li>
               </ul>
+            </ui-footer-collapsible>
           </div>
         </section>
         <section class="footer__social lg:text-right">
@@ -68,9 +73,8 @@
       </div>
       <section class="footer__sub-links lg:border-t border-grey-400">
         <div class="container container--default">
-      <div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0">
-        <span class="lg:w-1/4 text-xl uppercase text-white">Otevřenost</span>
-        <ul class="lg:w-2/4 lg:pr-8 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200">
+          <ui-footer-collapsible label="Otevřenost" labelClass="lg:w-1/4" wrapperClass="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0" slotWrapperclass="lg:w-2/4">
+            <ul class="lg:w-full lg:pr-8 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200">
               <li class="w-full">
                 <a href="#">Transparentní účet</a>
               </li>
@@ -81,7 +85,7 @@
                 <a href="#">Otevřené účetnictví</a>
               </li>
             </ul>
-      </div>
+          </ui-footer-collapsible>
         </div>
       </section>
       <section class="bg-black py-4 lg:py-12">
@@ -96,4 +100,6 @@
           </div>
         </div>
       </section>
+    </div>
+  </ui-footer>
 </footer>

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

 <nav class="navbar __js-root" data-app="Navbar">
-  <navbar inline-template>
+  <ui-navbar inline-template>
     <div>
       <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
         <div class="navbar__brand my-4 lg:pr-8 lg:my-0">
@@ -29,19 +29,19 @@
               <a href="{{ link.templates-people }}" class="navbar-menu__link">Lidé</a>
             </li>
             <li class="navbar-menu__item">
-              <navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
+              <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
                 <ul class="navbar-menu__submenu">
                   <li><a href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
                 </ul>
-              </navbar-subtitem>
+              </ui-navbar-subtitem>
             </li>
             <li class="navbar-menu__item">
-              <navbar-subitem label="Volby">
+              <ui-navbar-subitem label="Volby">
                 <ul class="navbar-menu__submenu">
                   <li><a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li>
                   <li><a href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li>
                 </ul>
-              </navbar-subtitem>
+              </ui-navbar-subtitem>
             </li>
             <li class="navbar-menu__item">
               <a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a>
@@ -60,5 +60,5 @@
         </div>
       </div>
     </div>
-  </navbar>
+  </ui-navbar>
 </nav>

source/css/organisms/footer.pcss

@@ -38,3 +38,28 @@
     grid-template-columns: 1fr 1fr 1fr auto;
   }
 }
+
+.footer-collapsible__toggle {
+  @apply flex items-center cursor-pointer;
+
+  &:after {
+    /* Compensate for font specifics, align to center. */
+    margin-bottom: -0.125rem;
+    content: "\f078";
+    font-family: "Font Awesome 5 Pro";
+
+    @apply ml-auto font-light text-sm transition duration-200;
+  }
+
+  &.footer-collapsible__toggle--open:after {
+    transform: rotate(-180deg);
+  }
+
+  @screen lg {
+    @apply cursor-auto;
+
+    &:after {
+      @apply hidden;
+    }
+  }
+}

source/js/apps.js

 
 import FlipClock from './apps/flip-clock';
 import Navbar from './apps/navbar';
+import Footer from './apps/footer';
 
 export default {
   FlipClock,
-  Navbar
+  Navbar,
+  Footer
 };

source/js/apps/footer/Footer.vue

+<script>
+import UiFooterCollapsible from "./FooterCollapsible";
+
+export default {
+  components: {
+    UiFooterCollapsible,
+  },
+}
+</script>

source/js/apps/footer/FooterCollapsible.vue

+<template>
+  <div :class="[wrapperclass, 'footer-collapsible']">
+    <span class="text-xl uppercase text-white footer-collapsible__toggle" :class="[labelclass, show ? 'footer-collapsible__toggle--open' : '']" @click="handleClick">{{ label }}</span>
+    <div v-show="show || isLgScreenSize" :class="[slotwrapperclass]">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import tailwindConfig from "../../../../tailwind.config";
+
+const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10);
+
+export default {
+  data() {
+    return {
+      isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+      show: false,
+      resizeHandler: () => {
+        this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+      },
+    };
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    labelclass: {
+      type: String,
+    },
+    wrapperclass: {
+      type: String,
+      default: "",
+    },
+    slotwrapperclass: {
+      type: String,
+      default: "",
+    }
+  },
+  methods: {
+    getWindowWidth() {
+      return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    },
+    handleClick() {
+      if (this.$props.href) {
+        window.location = this.$props.href;
+      }
+
+      this.$data.show = !this.$data.show;
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      window.addEventListener("resize", this.$data.resizeHandler);
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.$data.resizeHandler);
+  }
+}
+</script>

source/js/apps/footer/index.js

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

source/js/apps/navbar/Navbar.vue

 <script>
-  import NavbarSubitem from "./NavbarSubitem";
+  import UiNavbarSubitem from "./NavbarSubitem";
   import tailwindConfig from "../../../../tailwind.config";
 
   const lgScreenSize = parseInt(tailwindConfig.theme.screens.lg.replace("px", ""), 10);
 
   export default {
     components: {
-      NavbarSubitem
+      UiNavbarSubitem
     },
     data() {
       return {

source/js/apps/navbar/index.js

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