fix(navbar): js submenu acting weird, replaced by NavbarSubitemReplacing

source/_patterns/01-molecules/15-navbar/navbar-menu.mustache

@@ -3,11 +3,14 @@
     <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é">
-      <ul class="navbar-menu__submenu">
-        <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>
+    <ui-navbar-subitem-replacing label="Lidé">
+      <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+      <div class="navbar-menu__submenu-wrap">
+        <ul class="navbar-menu__submenu">
+          <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>
+      </div>
+    </ui-navbar-subtitem-replacing>
   </li>
   <li class="navbar-menu__item">
     <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>

source/_patterns/02-organisms/01-navbar/navbar.mustache

@@ -28,25 +28,34 @@
                 <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é">
-                  <ul class="navbar-menu__submenu">
-                    <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>
+                <ui-navbar-subitem-replacing label="Lidé" items="[[&quot;Delší link co je delší než hlavní menu položka&quot;, &quot;{{ link.templates-people }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <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>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
-                  <ul class="navbar-menu__submenu">
-                    <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
-                  </ul>
-                </ui-navbar-subtitem>
+                <ui-navbar-subitem-replacing label="Aktuality" href="{{ link.templates-article-listing }}" items="[[&quot;Detail aktuality&quot;, &quot;{{ link.templates-article-detail }}&quot;]]">
+                  <a href="{{ link.templates-article-listing }}" class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</a>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <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>
+                <ui-navbar-subitem-replacing label="Volby" items="[[&quot;Volební rozcestník&quot;, &quot;{{ link.templates-elections }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Volby</span>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </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/navbar/Navbar.vue

 <script>
   import UiNavbarSubitem from "./NavbarSubitem";
+  import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
   import { isLgScreenSize } from "../../utils";
 
   export default {
     components: {
-      UiNavbarSubitem
+      UiNavbarSubitem,
+      UiNavbarSubitemReplacing,
     },
     data() {
       return {

source/js/components/navbar/NavbarSubitemReplacing.vue

+<template>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
+    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
+    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
+      <ul class="navbar-menu__submenu">
+        <li v-for="(item, index) in parsedItems" :key="index">
+            <a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLgScreenSize } from "../../utils";
+
+export default {
+  data() {
+    return {
+      show: false,
+      parsedItems: JSON.parse(this.items),
+    };
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    items: {
+      type: String,
+    }
+  },
+  methods: {
+    onMouseEnter() {
+      if (isLgScreenSize()) {
+        this.$data.show = true;
+      }
+    },
+    onMouseLeave() {
+      if (isLgScreenSize()) {
+        this.$data.show = false;
+      }
+    },
+    handleClick(evt) {
+      // On mobile screens, first click should just toggle and redir on second one
+      if (isLgScreenSize() || this.$data.show) {
+        if (this.$props.href) {
+          window.location = this.$props.href;
+        }
+      }
+
+      this.$data.show = !this.$data.show;
+    }
+  }
+}
+</script>