From 2c336f137fbd5ce9ae9e2a52d752a87d528b8b07 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sun, 1 May 2022 22:07:18 +0200
Subject: [PATCH] fix(navbar): js submenu acting weird, replaced by
 NavbarSubitemReplacing

---
 .../15-navbar/navbar-menu.mustache            | 13 ++--
 .../02-organisms/01-navbar/navbar.mustache    | 39 +++++++-----
 source/js/components/navbar/Navbar.vue        |  4 +-
 .../navbar/NavbarSubitemReplacing.vue         | 59 +++++++++++++++++++
 4 files changed, 94 insertions(+), 21 deletions(-)
 create mode 100644 source/js/components/navbar/NavbarSubitemReplacing.vue

diff --git a/source/_patterns/01-molecules/15-navbar/navbar-menu.mustache b/source/_patterns/01-molecules/15-navbar/navbar-menu.mustache
index 60de7b4..c4492fc 100644
--- a/source/_patterns/01-molecules/15-navbar/navbar-menu.mustache
+++ b/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>
diff --git a/source/_patterns/02-organisms/01-navbar/navbar.mustache b/source/_patterns/02-organisms/01-navbar/navbar.mustache
index 5e86d17..9ab0280 100644
--- a/source/_patterns/02-organisms/01-navbar/navbar.mustache
+++ b/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>
diff --git a/source/js/components/navbar/Navbar.vue b/source/js/components/navbar/Navbar.vue
index bf73f55..e0c6be9 100644
--- a/source/js/components/navbar/Navbar.vue
+++ b/source/js/components/navbar/Navbar.vue
@@ -1,10 +1,12 @@
 <script>
   import UiNavbarSubitem from "./NavbarSubitem";
+  import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
   import { isLgScreenSize } from "../../utils";
 
   export default {
     components: {
-      UiNavbarSubitem
+      UiNavbarSubitem,
+      UiNavbarSubitemReplacing,
     },
     data() {
       return {
diff --git a/source/js/components/navbar/NavbarSubitemReplacing.vue b/source/js/components/navbar/NavbarSubitemReplacing.vue
new file mode 100644
index 0000000..9fd051e
--- /dev/null
+++ b/source/js/components/navbar/NavbarSubitemReplacing.vue
@@ -0,0 +1,59 @@
+<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>
-- 
GitLab