Fix navbar subnav JS bug

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

@@ -28,9 +28,9 @@
                 <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Lidé" href="{{ link.templates-people }}">
+                <ui-navbar-subitem label="Lidé">
                   <ul class="navbar-menu__submenu">
-                    <li><a href="#" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
+                    <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
                   </ul>
                 </ui-navbar-subtitem>
               </li>
@@ -42,7 +42,11 @@
                 </ui-navbar-subtitem>
               </li>
               <li class="navbar-menu__item">
-                <a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volby</a>
+                <ui-navbar-subitem label="Volby">
+                  <ul class="navbar-menu__submenu">
+                    <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
+                  </ul>
+                </ui-navbar-subtitem>
               </li>
               <li class="navbar-menu__item">
                 <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>

source/js/components/footer/FooterCollapsible.vue

@@ -9,17 +9,15 @@
 </template>
 
 <script>
-import screens from "../../../../screens";
-
-const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+import { isLgScreenSize } from "../../utils";
 
 export default {
   data() {
     return {
-      isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+      isLgScreenSize: isLgScreenSize(),
       show: false,
       resizeHandler: () => {
-        this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+        this.$data.isLgScreenSize = isLgScreenSize();
       },
     };
   },
@@ -43,9 +41,6 @@ export default {
     }
   },
   methods: {
-    getWindowWidth() {
-      return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-    },
     handleClick() {
       if (this.$props.href) {
         window.location = this.$props.href;

source/js/components/navbar/Navbar.vue

 <script>
   import UiNavbarSubitem from "./NavbarSubitem";
-  import screens from "../../../../screens";
-
-  const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+  import { isLgScreenSize } from "../../utils";
 
   export default {
     components: {
@@ -10,18 +8,13 @@
     },
     data() {
       return {
-        isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
+        isLgScreenSize: isLgScreenSize(),
         show: false,
         resizeHandler: () => {
-          this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
+          this.$data.isLgScreenSize = isLgScreenSize();
         },
       };
     },
-    methods: {
-      getWindowWidth() {
-        return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-      }
-    },
     mounted() {
       this.$nextTick(() => {
         window.addEventListener("resize", this.$data.resizeHandler);

source/js/components/navbar/NavbarSubitem.vue

 <template>
-  <div @mouseenter="show = true" @mouseleave="show = false">
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
     <span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
-
     <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
       <slot>
       </slot>
@@ -10,6 +9,8 @@
 </template>
 
 <script>
+import { isLgScreenSize } from "../../utils";
+
 export default {
   data() {
     return {
@@ -25,6 +26,16 @@ export default {
     }
   },
   methods: {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
     handleClick() {
       if (this.$props.href) {
         window.location = this.$props.href;

source/js/utils.js

+import screens from "../../screens";
+
+const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
+
 export const forEachNode = function (array, callback, scope) {
   for (var i = 0; i < array.length; i++) {
     callback.call(scope, array[i]); // passes back stuff we need
   }
 };
+
+export function getWindowWidth() {
+  return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
+
+export function isLgScreenSize() {
+  return getWindowWidth() >= lgScreenSize;
+}